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

ui: responsive!

Browse Source
This commit is contained in:
Andras Bacsai
2022-09-19 12:05:47 +02:00
parent 051629fad3
commit 6fc99524f0
68 changed files with 1270 additions and 1544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ui/src/lib/components/DocLink.svelte
View File

@@ -10,7 +10,7 @@
.slice(-16); .slice(-16);
</script> </script>
<a {id} href={url} target="_blank" class="icons inline-block text-pink-500 cursor-pointer text-xs"> <a {id} href={url} target="_blank" class="icons inline-block cursor-pointer text-xs mx-2">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6" class="w-6 h-6"

8
apps/ui/src/lib/components/Explainer.svelte
View File

@@ -10,17 +10,17 @@
}); });
</script> </script>
<div {id} class="inline-block mx-2 text-pink-500 cursor-pointer" bind:this={self}> <div {id} class="inline-block mx-2 cursor-pointer" bind:this={self}>
<svg <svg
fill="none" fill="none"
height="18" height="14"
shape-rendering="geometricPrecision" shape-rendering="geometricPrecision"
stroke="currentColor" stroke="currentColor"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="1.5" stroke-width="1.4"
viewBox="0 0 24 24" viewBox="0 0 24 24"
width="18" width="14"
><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" /><path ><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" /><path
d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"
/><circle cx="12" cy="17" r=".5" /> /><circle cx="12" cy="17" r=".5" />

10
apps/ui/src/lib/components/Setting.svelte
View File

@@ -15,9 +15,13 @@
<div class="flex items-center py-4 pr-8"> <div class="flex items-center py-4 pr-8">
<div class="flex w-96 flex-col"> <div class="flex w-96 flex-col">
<div class="text-xs font-bold text-stone-100 md:text-base"> <!-- svelte-ignore a11y-label-has-associated-control -->
{title}<Explaner explanation={description} /> <label>
</div> {title}
{#if description && description !== ''}
<Explaner explanation={description} />
{/if}
</label>
</div> </div>
</div> </div>
<div class:text-center={isCenter} class="flex justify-center"> <div class:text-center={isCenter} class="flex justify-center">

8
apps/ui/src/lib/components/Toast.svelte
View File

@@ -2,6 +2,11 @@
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
export let type = 'info'; export let type = 'info';
function success() {
if (type === 'success') {
return 'bg-gradient-to-r from-coollabs to-pink-500';
}
}
</script> </script>
<div <div
@@ -10,8 +15,7 @@
on:focus={() => dispatch('pause')} on:focus={() => dispatch('pause')}
on:mouseout={() => dispatch('resume')} on:mouseout={() => dispatch('resume')}
on:blur={() => dispatch('resume')} on:blur={() => dispatch('resume')}
class="alert shadow-lg text-white rounded hover:scale-105 transition-all duration-100 cursor-pointer" class={`alert shadow-lg text-white hover:scale-105 transition-all duration-100 cursor-pointer rounded ${success()}`}
class:bg-coollabs={type === 'success'}
class:alert-error={type === 'error'} class:alert-error={type === 'error'}
class:alert-info={type === 'info'} class:alert-info={type === 'info'}
> >

3
apps/ui/src/lib/components/Toasts.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition';
import Toast from './Toast.svelte'; import Toast from './Toast.svelte';
import { dismissToast, pauseToast, resumeToast, toasts } from '$lib/store'; import { dismissToast, pauseToast, resumeToast, toasts } from '$lib/store';
@@ -7,7 +6,7 @@
{#if $toasts} {#if $toasts}
<section> <section>
<article class="toast toast-top toast-end rounded-none" role="alert" transition:fade> <article class="toast toast-top toast-end rounded-none px-10" role="alert" >
{#each $toasts as toast (toast.id)} {#each $toasts as toast (toast.id)}
<Toast <Toast
type={toast.type} type={toast.type}

2
apps/ui/src/lib/components/Tooltip.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { Tooltip } from 'flowbite-svelte'; import { Tooltip } from 'flowbite-svelte';
export let placement = 'bottom'; export let placement = 'bottom';
export let color = 'bg-coollabs text-left'; export let color = 'bg-coolgray-300 font-thin text-left';
export let triggeredBy = '#tooltip-default'; export let triggeredBy = '#tooltip-default';
</script> </script>

2
apps/ui/src/lib/components/UpdateAvailable.svelte
View File

@@ -83,7 +83,7 @@
id="update" id="update"
disabled={updateStatus.success === false} disabled={updateStatus.success === false}
on:click={update} on:click={update}
class="icons bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105" class="icons bg-gradient-to-r from-coollabs to-pink-500 text-white duration-75 hover:scale-105"
> >
{#if updateStatus.loading} {#if updateStatus.loading}
<svg <svg

4
apps/ui/src/lib/components/Usage.svelte
View File

@@ -79,12 +79,12 @@
BETA BETA
</div> </div>
{/if} {/if}
<div class="w-full flex flex-col lg:flex-row space-y-4 lg:space-y-0"> <div class="w-full flex flex-col lg:flex-row space-y-4 lg:space-y-0 space-x-4">
<div class="flex flex-col"> <div class="flex flex-col">
<h1 class="font-bold text-lg lg:text-xl truncate"> <h1 class="font-bold text-lg lg:text-xl truncate">
{server.name} {server.name}
</h1> </h1>
<div class="text-xs "> <div class="text-xs">
{#if server?.remoteIpAddress} {#if server?.remoteIpAddress}
<h2>{server?.remoteIpAddress}</h2> <h2>{server?.remoteIpAddress}</h2>
{:else} {:else}

9
apps/ui/src/lib/components/svg/databases/MariaDB.svelte
View File

@@ -9,15 +9,8 @@
viewBox="0 0 309.88 252.72" viewBox="0 0 309.88 252.72"
class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-12 w-12 ' : 'mx-auto w-8 h-8'} class={isAbsolute ? 'absolute top-0 left-0 -m-5 h-12 w-12 ' : 'mx-auto w-8 h-8'}
> >
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<path <path
class="cls-1" fill="#fff"
d="M316,10.05a4.2,4.2,0,0,0-2.84-1c-2.84,0-6.5,1.92-8.46,3l-.79.4a26.81,26.81,0,0,1-10.57,2.66c-3.76.12-7,.34-11.22.77-25,2.58-36.15,21.74-46.89,40.27-5.84,10.08-11.88,20.5-20.16,28.57a55.71,55.71,0,0,1-5.46,4.63c-8.57,6.39-19.33,10.9-27.74,14.12-8.07,3.08-16.86,5.85-25.37,8.53-7.78,2.45-15.14,4.76-21.9,7.28-3.05,1.13-5.64,2-7.93,2.76-6.15,2-10.6,3.53-17.08,8-2.53,1.73-5.07,3.6-6.8,5a71.26,71.26,0,0,0-13.54,14.27A84.81,84.81,0,0,1,77.88,163c-1.36,1.34-3.8,2-7.43,2-4.27,0-9.43-.88-14.91-1.81s-11.46-2-16.46-2c-4.07,0-7.17.66-9.5,2,0,0-3.9,2.28-5.56,5.23l1.62.73a33.56,33.56,0,0,1,6.93,5,33.68,33.68,0,0,0,7.19,5.12A6.37,6.37,0,0,1,42,180.72c-.69,1-1.69,2.29-2.74,3.67-5.77,7.55-9.13,12.32-7.2,14.92a6,6,0,0,0,3,.68c12.59,0,19.34-3.27,27.9-7.41,2.47-1.2,5-2.44,8-3.7,5-2.17,10.38-5.63,16.08-9.29,7.55-4.85,15.36-9.87,22.92-12.3a62.3,62.3,0,0,1,19.23-2.7c8,0,16.42,1.07,24.54,2.11,6.06.78,12.32,1.58,18.47,2,2.39.14,4.6.21,6.76.21a78.48,78.48,0,0,0,8.61-.45l.68-.24c4.32-2.65,6.34-8.34,8.29-13.84,1.26-3.54,2.32-6.72,4-8.74a2.06,2.06,0,0,1,.33-.27.4.4,0,0,1,.49.08.25.25,0,0,1,0,.16c-1,21.51-9.67,35.16-18.42,47.3L177,199.14s8.18,0,12.84-1.8c17-5.08,29.84-16.28,39.18-34.14a144.39,144.39,0,0,0,6.16-14.09c.16-.4,1.64-1.14,1.49.93,0,.61-.08,1.29-.13,2h0c0,.42-.06.85-.08,1.28-.25,3-1,9.34-1,9.34l5.25-2.81c12.66-8,22.42-24.14,29.82-49.25,3.09-10.46,5.34-20.85,7.33-30,2.38-11,4.43-20.43,6.78-24.09,3.69-5.74,9.32-9.62,14.77-13.39.75-.51,1.49-1,2.22-1.54,6.86-4.81,13.67-10.36,15.16-20.71l0-.23C317.93,12.92,317,11,316,10.05Z" d="M316,10.05a4.2,4.2,0,0,0-2.84-1c-2.84,0-6.5,1.92-8.46,3l-.79.4a26.81,26.81,0,0,1-10.57,2.66c-3.76.12-7,.34-11.22.77-25,2.58-36.15,21.74-46.89,40.27-5.84,10.08-11.88,20.5-20.16,28.57a55.71,55.71,0,0,1-5.46,4.63c-8.57,6.39-19.33,10.9-27.74,14.12-8.07,3.08-16.86,5.85-25.37,8.53-7.78,2.45-15.14,4.76-21.9,7.28-3.05,1.13-5.64,2-7.93,2.76-6.15,2-10.6,3.53-17.08,8-2.53,1.73-5.07,3.6-6.8,5a71.26,71.26,0,0,0-13.54,14.27A84.81,84.81,0,0,1,77.88,163c-1.36,1.34-3.8,2-7.43,2-4.27,0-9.43-.88-14.91-1.81s-11.46-2-16.46-2c-4.07,0-7.17.66-9.5,2,0,0-3.9,2.28-5.56,5.23l1.62.73a33.56,33.56,0,0,1,6.93,5,33.68,33.68,0,0,0,7.19,5.12A6.37,6.37,0,0,1,42,180.72c-.69,1-1.69,2.29-2.74,3.67-5.77,7.55-9.13,12.32-7.2,14.92a6,6,0,0,0,3,.68c12.59,0,19.34-3.27,27.9-7.41,2.47-1.2,5-2.44,8-3.7,5-2.17,10.38-5.63,16.08-9.29,7.55-4.85,15.36-9.87,22.92-12.3a62.3,62.3,0,0,1,19.23-2.7c8,0,16.42,1.07,24.54,2.11,6.06.78,12.32,1.58,18.47,2,2.39.14,4.6.21,6.76.21a78.48,78.48,0,0,0,8.61-.45l.68-.24c4.32-2.65,6.34-8.34,8.29-13.84,1.26-3.54,2.32-6.72,4-8.74a2.06,2.06,0,0,1,.33-.27.4.4,0,0,1,.49.08.25.25,0,0,1,0,.16c-1,21.51-9.67,35.16-18.42,47.3L177,199.14s8.18,0,12.84-1.8c17-5.08,29.84-16.28,39.18-34.14a144.39,144.39,0,0,0,6.16-14.09c.16-.4,1.64-1.14,1.49.93,0,.61-.08,1.29-.13,2h0c0,.42-.06.85-.08,1.28-.25,3-1,9.34-1,9.34l5.25-2.81c12.66-8,22.42-24.14,29.82-49.25,3.09-10.46,5.34-20.85,7.33-30,2.38-11,4.43-20.43,6.78-24.09,3.69-5.74,9.32-9.62,14.77-13.39.75-.51,1.49-1,2.22-1.54,6.86-4.81,13.67-10.36,15.16-20.71l0-.23C317.93,12.92,317,11,316,10.05Z"
transform="translate(-7.45 -9.1)" transform="translate(-7.45 -9.1)"
/> />

2
apps/ui/src/lib/components/svg/services/Fider.svelte
View File

@@ -5,7 +5,7 @@
<svg <svg
viewBox="0 0 700 240" viewBox="0 0 700 240"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class={isAbsolute ? 'w-36 absolute top-0 left-0 -m-3 -mt-5' : 'w-28 h-28 mx-auto'} class={isAbsolute ? 'w-36 absolute top-0 left-0 -m-3 -mt-5' : 'w-full h-10 mx-auto'}
><path fill="#FDBC3D" d="m90.694 107.498-.981.39-20.608 8.23 6.332 6.547z" /><path ><path fill="#FDBC3D" d="m90.694 107.498-.981.39-20.608 8.23 6.332 6.547z" /><path
fill="#8EC63F" fill="#8EC63F"
d="M61.139 77.914 46.632 93 56.9 103.547c8.649-7.169 17.832-10.502 18.653-10.789L61.139 77.914z" d="M61.139 77.914 46.632 93 56.9 103.547c8.649-7.169 17.832-10.502 18.653-10.789L61.139 77.914z"

2
apps/ui/src/lib/components/svg/services/Weblate.svelte
View File

@@ -4,7 +4,7 @@
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class={isAbsolute ? 'w-16 h-16 absolute top-0 left-0 -m-7' : 'w-12 h-12 mx-auto'} class={isAbsolute ? 'w-16 h-16 absolute top-0 left-0 -m-7' : 'w-10 h-10 mx-auto'}
version="1.1" version="1.1"
viewBox="0 0 300 300" viewBox="0 0 300 300"
><linearGradient ><linearGradient

34
apps/ui/src/lib/locales/en.json
View File

@@ -88,7 +88,7 @@
"removing": "Removing...", "removing": "Removing...",
"remove_domain": "Remove domain", "remove_domain": "Remove domain",
"public_port_range": "Public Port Range", "public_port_range": "Public Port Range",
"public_port_range_explainer": "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-settings font-bold'>9000-9100</span>", "public_port_range_explainer": "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-settings '>9000-9100</span>",
"no_actions_available": "No actions available", "no_actions_available": "No actions available",
"admin_api_key": "Admin API key" "admin_api_key": "Admin API key"
}, },
@@ -144,8 +144,8 @@
}, },
"preview": { "preview": {
"need_during_buildtime": "Need during buildtime?", "need_during_buildtime": "Need during buildtime?",
"setup_secret_app_first": "You can add secrets to PR/MR deployments. Please add secrets to the application first. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments.", "setup_secret_app_first": "You can add secrets to PR/MR deployments. Please add secrets to the application first. <br>Useful for creating <span class='text-settings '>staging</span> environments.",
"values_overwriting_app_secrets": "These values overwrite application secrets in PR/MR deployments. Useful for creating <span class='text-green-500 font-bold'>staging</span> environments.", "values_overwriting_app_secrets": "These values overwrite application secrets in PR/MR deployments. Useful for creating <span class='text-settings '>staging</span> environments.",
"redeploy": "Redeploy", "redeploy": "Redeploy",
"no_previews_available": "No previews available" "no_previews_available": "No previews available"
}, },
@@ -159,7 +159,7 @@
"storage_saved": "Storage saved.", "storage_saved": "Storage saved.",
"storage_updated": "Storage updated.", "storage_updated": "Storage updated.",
"storage_deleted": "Storage deleted.", "storage_deleted": "Storage deleted.",
"persistent_storage_explainer": "You can specify any folder that you want to be persistent across deployments.<br><span class='text-green-500 font-bold'>/example</span> means it will preserve <span class='text-green-500 font-bold'>/app/example</span> in the container as <span class='text-green-500 font-bold'>/app</span> is <span class='text-green-500 font-bold'>the root directory</span> for your application.<br><br>This is useful for storing data such as a <span class='text-green-500 font-bold'>database (SQLite)</span> or a <span class='text-green-500 font-bold'>cache</span>." "persistent_storage_explainer": "You can specify any folder that you want to be persistent across deployments.<br><span class='text-settings '>/example</span> means it will preserve <span class='text-settings '>/app/example</span> in the container as <span class='text-settings '>/app</span> is <span class='text-settings '>the root directory</span> for your application.<br><br>This is useful for storing data such as a <span class='text-settings '>database (SQLite)</span> or a <span class='text-settings '>cache</span>."
}, },
"deployment_queued": "Deployment queued.", "deployment_queued": "Deployment queued.",
"confirm_to_delete": "Are you sure you would like to delete '{{name}}'?", "confirm_to_delete": "Are you sure you would like to delete '{{name}}'?",
@@ -194,14 +194,14 @@
"application": "Application", "application": "Application",
"url_fqdn": "URL (FQDN)", "url_fqdn": "URL (FQDN)",
"domain_fqdn": "Domain (FQDN)", "domain_fqdn": "Domain (FQDN)",
"https_explainer": "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.<br><br><span class='text-white font-bold'>You must set your DNS to point to the server IP in advance.</span>", "https_explainer": "If you specify <span class='text-settings '>https</span>, the application will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-settings '>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.<br><br><span class='text-white '>You must set your DNS to point to the server IP in advance.</span>",
"ssl_www_and_non_www": "Generate SSL for www and non-www?", "ssl_www_and_non_www": "Generate SSL for www and non-www?",
"ssl_explainer": "It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-green-500'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both.", "ssl_explainer": "It will generate certificates for both www and non-www. <br>You need to have <span class=' text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both.",
"install_command": "Install Command", "install_command": "Install Command",
"build_command": "Build Command", "build_command": "Build Command",
"start_command": "Start Command", "start_command": "Start Command",
"directory_to_use_explainer": "Directory to use as the base for all commands.<br>Could be useful with <span class='text-green-500 font-bold'>monorepos</span>.", "directory_to_use_explainer": "Directory to use as the base for all commands.<br>Could be useful with <span class='text-settings '>monorepos</span>.",
"publish_directory_explainer": "Directory containing all the assets for deployment. <br> For example: <span class='text-green-500 font-bold'>dist</span>,<span class='text-green-500 font-bold'>_site</span> or <span class='text-green-500 font-bold'>public</span>.", "publish_directory_explainer": "Directory containing all the assets for deployment. <br> For example: <span class='text-settings '>dist</span>,<span class='text-settings '>_site</span> or <span class='text-settings '>public</span>.",
"features": "Features", "features": "Features",
"enable_automatic_deployment": "Enable Automatic Deployment", "enable_automatic_deployment": "Enable Automatic Deployment",
"enable_auto_deploy_webhooks": "Enable automatic deployment through webhooks.", "enable_auto_deploy_webhooks": "Enable automatic deployment through webhooks.",
@@ -209,7 +209,7 @@
"expose_a_port": "Expose a port", "expose_a_port": "Expose a port",
"enable_preview_deploy_mr_pr_requests": "Enable preview deployments from pull or merge requests.", "enable_preview_deploy_mr_pr_requests": "Enable preview deployments from pull or merge requests.",
"debug_logs": "Debug Logs", "debug_logs": "Debug Logs",
"enable_debug_log_during_build": "Enable debug logs during build phase.<br><span class='text-settings font-bold'>Sensitive information</span> could be visible and saved in logs.", "enable_debug_log_during_build": "Enable debug logs during build phase.<br><span class='text-settings '>Sensitive information</span> could be visible and saved in logs.",
"cant_activate_auto_deploy_without_repo": "Cannot activate automatic deployments until only one application is defined for this repository / branch.", "cant_activate_auto_deploy_without_repo": "Cannot activate automatic deployments until only one application is defined for this repository / branch.",
"no_applications_found": "No applications found", "no_applications_found": "No applications found",
"secret__batch_dot_env": "Paste .env file", "secret__batch_dot_env": "Paste .env file",
@@ -223,7 +223,7 @@
"set_public": "Set it public", "set_public": "Set it public",
"warning_database_public": "Your database will be reachable over the internet. <br>Take security seriously in this case!", "warning_database_public": "Your database will be reachable over the internet. <br>Take security seriously in this case!",
"change_append_only_mode": "Change append only mode", "change_append_only_mode": "Change append only mode",
"warning_append_only": "Useful if you would like to restore redis data from a backup.<br><span class='font-bold text-white'>Database restart is required.</span>", "warning_append_only": "Useful if you would like to restore redis data from a backup.<br><span class=' text-white'>Database restart is required.</span>",
"select_database_type": "Select a Database type", "select_database_type": "Select a Database type",
"select_database_version": "Select a Database version", "select_database_version": "Select a Database version",
"confirm_stop": "Are you sure you would like to stop {{name}}?", "confirm_stop": "Are you sure you would like to stop {{name}}?",
@@ -275,7 +275,7 @@
"application_id": "Application ID", "application_id": "Application ID",
"group_name": "Group Name", "group_name": "Group Name",
"oauth_id": "OAuth ID", "oauth_id": "OAuth ID",
"oauth_id_explainer": "The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class='font-bold text-settings' >in the URL</span> of your GitLab OAuth Application.", "oauth_id_explainer": "The OAuth ID is the unique identifier of the GitLab application. <br>You can find it <span class=' text-settings' >in the URL</span> of your GitLab OAuth Application.",
"register_oauth_gitlab": "Register new OAuth application on GitLab", "register_oauth_gitlab": "Register new OAuth application on GitLab",
"gitlab": { "gitlab": {
"self_hosted": "Instance-wide application (self-hosted)", "self_hosted": "Instance-wide application (self-hosted)",
@@ -290,7 +290,7 @@
}, },
"services": { "services": {
"all_email_verified": "All emails are verified. You can login now.", "all_email_verified": "All emails are verified. You can login now.",
"generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-pink-600'>both DNS entries</span> set in advance.<br><br>Service needs to be restarted." "generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class='text-settings'>both DNS entries</span> set in advance.<br><br>Service needs to be restarted."
}, },
"service": { "service": {
"stop_service": "Stop", "stop_service": "Stop",
@@ -306,15 +306,15 @@
"change_language": "Change Language", "change_language": "Change Language",
"permission_denied": "You do not have permission to do this. \\nAsk an admin to modify your permissions.", "permission_denied": "You do not have permission to do this. \\nAsk an admin to modify your permissions.",
"domain_removed": "Domain removed", "domain_removed": "Domain removed",
"ssl_explainer": "If you specify <span class='text-settings 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-settings font-bold'>www</span>, Coolify will be redirected (302) from non-www and vice versa.<br><br><span class='text-settings font-bold'>WARNING:</span> If you change an already set domain, it will break webhooks and other integrations! You need to manually update them.", "ssl_explainer": "If you specify <span class='text-settings'>https</span>, Coolify will be accessible only over https. SSL certificate will be generated for you.<br>If you specify <span class='text-settings '>www</span>, Coolify will be redirected (302) from non-www and vice versa.<br><br><span class='text-settings '>WARNING:</span> If you change an already set domain, it will break webhooks and other integrations! You need to manually update them.",
"must_remove_domain_before_changing": "Must remove the domain before you can change this setting.", "must_remove_domain_before_changing": "Must remove the domain before you can change this setting.",
"registration_allowed": "Registration allowed?", "registration_allowed": "Registration allowed?",
"registration_allowed_explainer": "Allow further registrations to the application. <br>It's turned off after the first registration.", "registration_allowed_explainer": "Allow further registrations to the application. <br>It's turned off after the first registration.",
"coolify_proxy_settings": "Coolify Proxy Settings", "coolify_proxy_settings": "Coolify Proxy Settings",
"credential_stat_explainer": "Credentials for <a class=\"text-white font-bold\" href=\"{{link}}\" target=\"_blank\">stats</a> page.", "credential_stat_explainer": "Credentials for <a class=\"text-white \" href=\"{{link}}\" target=\"_blank\">stats</a> page.",
"auto_update_enabled": "Auto update enabled?", "auto_update_enabled": "Auto update enabled?",
"auto_update_enabled_explainer": "Enable automatic updates for Coolify. It will be done automatically behind the scenes, if there is no build process running.", "auto_update_enabled_explainer": "Enable automatic updates for Coolify. It will be done automatically behind the scenes, if there is no build process running.",
"generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-settings'>both DNS entries</span> set in advance.", "generate_www_non_www_ssl": "It will generate certificates for both www and non-www. <br>You need to have <span class=' text-settings'>both DNS entries</span> set in advance.",
"is_dns_check_enabled": "DNS check enabled?", "is_dns_check_enabled": "DNS check enabled?",
"is_dns_check_enabled_explainer": "You can disable DNS check before creating SSL certificates.<br><br>Turning it off is useful when Coolify is behind a reverse proxy or tunnel." "is_dns_check_enabled_explainer": "You can disable DNS check before creating SSL certificates.<br><br>Turning it off is useful when Coolify is behind a reverse proxy or tunnel."
}, },
@@ -324,9 +324,9 @@
"delete": "Delete", "delete": "Delete",
"member": "member(s)", "member": "member(s)",
"root": "(root)", "root": "(root)",
"invited_with_permissions": "Invited to <span class=\"font-bold text-pink-600\">{{teamName}}</span> with <span class=\"font-bold text-rose-600\">{{permission}}</span> permission.", "invited_with_permissions": "Invited to <span class=\" text-settings\">{{teamName}}</span> with <span class=\" text-rose-600\">{{permission}}</span> permission.",
"members": "Members", "members": "Members",
"root_team_explainer": "This is the <span class='text-red-500 font-bold'>root</span> team. That means members of this group can manage instance wide settings and have all the priviliges in Coolify (imagine like root user on Linux).", "root_team_explainer": "This is the <span class='text-red-500 '>root</span> team. That means members of this group can manage instance wide settings and have all the priviliges in Coolify (imagine like root user on Linux).",
"permission": "Permission", "permission": "Permission",
"you": "(You)", "you": "(You)",
"promote_to": "Promote to {{grade}}", "promote_to": "Promote to {{grade}}",

2
apps/ui/src/routes/_NewResource.svelte
View File

@@ -16,7 +16,7 @@
} }
</script> </script>
<div class="dropdown dropdown-left"> <div class="dropdown dropdown-bottom">
<slot> <slot>
<label for="new" tabindex="0" class="btn btn-square btn-sm bg-coollabs"> <label for="new" tabindex="0" class="btn btn-square btn-sm bg-coollabs">
<svg <svg

62
apps/ui/src/routes/__layout.svelte
View File

@@ -107,10 +107,11 @@
</script> </script>
<svelte:head> <svelte:head>
<title>Coolify</title>
{#if !$appSession.whiteLabeled} {#if !$appSession.whiteLabeled}
<title>Coolify</title>
<link rel="icon" href="/favicon.png" /> <link rel="icon" href="/favicon.png" />
{:else if $appSession.whiteLabeledDetails.icon} {:else if $appSession.whiteLabeledDetails.icon}
<title>Coolify</title>
<link rel="icon" href={$appSession.whiteLabeledDetails.icon} /> <link rel="icon" href={$appSession.whiteLabeledDetails.icon} />
{/if} {/if}
</svelte:head> </svelte:head>
@@ -284,25 +285,18 @@
{/if} {/if}
{/if} {/if}
<div <div
class="navbar bg-neutral-focus lg:hidden space-x-2 flex flex-row items-center" class="navbar lg:hidden space-x-2 flex flex-row items-center bg-coollabs"
class:hidden={!$appSession.userId} class:hidden={!$appSession.userId}
> >
<label for="main-drawer" class="drawer-button btn btn-square btn-ghost"> <label for="main-drawer" class="drawer-button btn btn-square btn-ghost flex-col">
<svg <span class="burger bg-white" />
xmlns="http://www.w3.org/2000/svg" <span class="burger bg-white" />
fill="none" <span class="burger bg-white" />
viewBox="0 0 24 24"
class="inline-block w-5 h-5 stroke-current"
><path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/></svg
>
</label> </label>
<div class="prose flex flex-row justify-between space-x-1 w-full items-center pr-3"> <div class="prose flex flex-row justify-between space-x-1 w-full items-center pr-3">
<h3 class="mb-0">Coolify</h3> {#if !$appSession.whiteLabeled}
<h3 class="mb-0 text-white">Coolify</h3>
{/if}
<UpdateAvailable /> <UpdateAvailable />
</div> </div>
</div> </div>
@@ -314,10 +308,7 @@
</div> </div>
<div class="drawer-side"> <div class="drawer-side">
<label for="main-drawer" class="drawer-overlay w-full" /> <label for="main-drawer" class="drawer-overlay w-full" />
<ul class="menu bg-base-100 w-80 p-2 rounded-r-lg space-y-3"> <ul class="menu bg-coolgray-300 w-60 p-2 space-y-3 pt-4 ">
<li class="menu-title">
<span>Main</span>
</li>
<li> <li>
<a <a
class="no-underline icons hover:text-white" class="no-underline icons hover:text-white"
@@ -329,7 +320,7 @@
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-9 w-9" class="h-8 w-8"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
@@ -346,12 +337,10 @@
Dashboard Dashboard
</a> </a>
</li> </li>
<li class="menu-title">
<span>Manage</span>
</li>
<li> <li>
<a <a
class="no-underline" class="no-underline icons hover:text-white"
sveltekit:prefetch sveltekit:prefetch
href="/servers" href="/servers"
class:bg-applications={$page.url.pathname.startsWith('/servers')} class:bg-applications={$page.url.pathname.startsWith('/servers')}
@@ -375,15 +364,12 @@
Servers Servers
</a> </a>
</li> </li>
<li class="menu-title">
<span>Dashboard settings</span>
</li>
<li> <li>
<a class="no-underline" href="/iam" class:bg-iam={$page.url.pathname.startsWith('/iam')} <a class="no-underline icons hover:text-white" href="/iam" class:bg-iam={$page.url.pathname.startsWith('/iam')}
><svg ><svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
class="h-9 w-9" class="h-8 w-8"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
fill="none" fill="none"
@@ -402,7 +388,7 @@
</li> </li>
<li> <li>
<a <a
class="no-underline" class="no-underline icons hover:text-white"
href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'} href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
class:bg-settings={$page.url.pathname.startsWith('/settings')} class:bg-settings={$page.url.pathname.startsWith('/settings')}
class:text-black={$page.url.pathname.startsWith('/settings')} class:text-black={$page.url.pathname.startsWith('/settings')}
@@ -410,7 +396,7 @@
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
class="h-9 w-9" class="h-8 w-8"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
fill="none" fill="none"
@@ -430,7 +416,7 @@
> >
</li> </li>
<li> <li>
<div class="no-underline hover:bg-error" on:click={logout}> <div class="no-underline icons hover:bg-error" on:click={logout}>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="ml-1 h-8 w-8" class="ml-1 h-8 w-8"
@@ -447,10 +433,18 @@
/> />
<path d="M7 12h14l-3 -3m0 6l3 -3" /> <path d="M7 12h14l-3 -3m0 6l3 -3" />
</svg> </svg>
Logout <div class="-ml-1">Logout</div>
</div> </div>
<Tooltip triggeredBy="#logout" placement="right" color="bg-red-600">Logout</Tooltip> <Tooltip triggeredBy="#logout" placement="right" color="bg-red-600">Logout</Tooltip>
</li> </li>
<li class="flex-1 bg-transparent" />
<li class="w-full justify-center">
<a
class="text-xs hover:bg-coolgray-200 no-underline hover:text-white"
href={`https://github.com/coollabsio/coolify/releases/tag/v${$appSession.version}`}
target="_blank">Changelog: v{$appSession.version}</a
>
</li>
</ul> </ul>
</div> </div>
</div> </div>

66
apps/ui/src/routes/applications/[id]/__layout.svelte
View File

@@ -188,13 +188,30 @@
}); });
</script> </script>
<nav class="header"> <nav class="header lg:flex-row flex-col-reverse">
<div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex"> <div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
<div class="flex flex-col"> <div class="flex flex-col items-center justify-center">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block"> <div class="title">
Configuration {#if $page.url.pathname === `/applications/${id}`}
Configurations
{:else if $page.url.pathname === `/applications/${id}/secrets`}
Secrets
{:else if $page.url.pathname === `/applications/${id}/storages`}
Persistent Storages
{:else if $page.url.pathname === `/applications/${id}/previews`}
Preview Deployments
{:else if $page.url.pathname === `/applications/${id}/logs`}
Application Logs
{:else if $page.url.pathname === `/applications/${id}/logs/build`}
Build Logs
{:else if $page.url.pathname === `/applications/${id}/configuration/source`}
Select a Git Source
{:else if $page.url.pathname === `/applications/${id}/configuration/destination`}
Select a Destination
{:else if $page.url.pathname === `/applications/${id}/configuration/buildpack`}
Select a Build Pack
{/if}
</div> </div>
<span class="text-xs">{application.name}</span>
</div> </div>
{#if application.gitSource?.htmlUrl && application.repository && application.branch} {#if application.gitSource?.htmlUrl && application.repository && application.branch}
<a <a
@@ -242,15 +259,10 @@
<Tooltip triggeredBy="#git">Open on Git</Tooltip> <Tooltip triggeredBy="#git">Open on Git</Tooltip>
{/if} {/if}
</div> </div>
<div <div class="lg:block hidden flex-1" />
class="flex flex-row flex-wrap space-x-4 space-y-3 justify-center lg:justify-start py-2 lg:py-0" <div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
>
{#if $location} {#if $location}
<a <a id="open" href={$location} target="_blank" class="icons bg-transparent"
id="open"
href={$location}
target="_blank"
class="icons flex items-center bg-transparent text-sm mt-3"
><svg ><svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" class="h-6 w-6"
@@ -269,13 +281,13 @@
> >
<Tooltip triggeredBy="#open">Open</Tooltip> <Tooltip triggeredBy="#open">Open</Tooltip>
<div class="border border-coolgray-500 h-8" /> <div class="hidden lg:block border border-coolgray-500 h-8" />
{/if} {/if}
{#if $status.application.isExited || $status.application.isRestarting} {#if $status.application.isExited || $status.application.isRestarting}
<a <a
id="applicationerror" id="applicationerror"
href={$isDeploymentEnabled ? `/applications/${id}/logs` : null} href={$isDeploymentEnabled ? `/applications/${id}/logs` : null}
class="icons bg-transparent text-sm flex items-center text-error" class="icons bg-transparent text-sm text-error"
sveltekit:prefetch sveltekit:prefetch
> >
<svg <svg
@@ -299,9 +311,7 @@
<Tooltip triggeredBy="#applicationerror">Application exited with an error!</Tooltip> <Tooltip triggeredBy="#applicationerror">Application exited with an error!</Tooltip>
{/if} {/if}
{#if $status.application.initialLoading} {#if $status.application.initialLoading}
<button <button class="icons animate-spin bg-transparent duration-500 ease-in-out">
class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" class="h-6 w-6"
@@ -327,7 +337,7 @@
on:click={stopApplication} on:click={stopApplication}
type="submit" type="submit"
disabled={!$isDeploymentEnabled} disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm flex items-center space-x-2 text-error" class="icons bg-transparent text-error"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -351,7 +361,7 @@
on:click={restartApplication} on:click={restartApplication}
type="submit" type="submit"
disabled={!$isDeploymentEnabled} disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm flex items-center space-x-2" class="icons bg-transparent"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -375,7 +385,7 @@
id="forceredeploy" id="forceredeploy"
type="submit" type="submit"
disabled={!$isDeploymentEnabled} disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm flex items-center space-x-2" class="icons bg-transparent"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -402,7 +412,7 @@
id="deploy" id="deploy"
type="submit" type="submit"
disabled={!$isDeploymentEnabled} disabled={!$isDeploymentEnabled}
class="icons bg-transparent text-sm flex items-center space-x-2 text-success" class="icons bg-transparent text-success"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -422,7 +432,7 @@
</form> </form>
{/if} {/if}
<div class="border border-coolgray-500 h-8" /> <div class="hidden lg:block border border-coolgray-500 h-8" />
<a <a
href={$isDeploymentEnabled ? `/applications/${id}` : null} href={$isDeploymentEnabled ? `/applications/${id}` : null}
sveltekit:prefetch sveltekit:prefetch
@@ -548,7 +558,7 @@
> >
<Tooltip triggeredBy="#previews">Previews</Tooltip> <Tooltip triggeredBy="#previews">Previews</Tooltip>
{/if} {/if}
<div class="border border-coolgray-500 h-8" /> <div class="hidden lg:block border border-coolgray-500 h-8" />
<a <a
href={$isDeploymentEnabled && $status.application.isRunning href={$isDeploymentEnabled && $status.application.isRunning
? `/applications/${id}/logs` ? `/applications/${id}/logs`
@@ -614,7 +624,7 @@
</button></a </button></a
> >
<Tooltip triggeredBy="#buildlogs">Build Logs</Tooltip> <Tooltip triggeredBy="#buildlogs">Build Logs</Tooltip>
<div class="border border-coolgray-500 h-8" /> <div class="hidden lg:block border border-coolgray-500 h-8" />
{#if forceDelete} {#if forceDelete}
<button <button
@@ -628,7 +638,7 @@
> >
Force Delete Force Delete
</button> </button>
<Tooltip triggeredBy="#forcedelete">Force Delete</Tooltip> <Tooltip triggeredBy="#forcedelete" placement="left">Force Delete</Tooltip>
{:else} {:else}
<button <button
id="delete" id="delete"
@@ -640,7 +650,7 @@
> >
<DeleteIcon /> <DeleteIcon />
</button> </button>
<Tooltip triggeredBy="#delete">Delete</Tooltip> <Tooltip triggeredBy="#delete" placement="left">Delete</Tooltip>
{/if} {/if}
</div> </div>
</nav> </nav>

7
apps/ui/src/routes/applications/[id]/configuration/_PublicRepository.svelte
View File

@@ -156,12 +156,12 @@
} }
</script> </script>
<div class="mx-auto max-w-5xl"> <div class="mx-auto max-w-6xl">
<form <form
class="flex flex-col lg:flex-row w-full lg:px-32 space-y-5 lg:space-y-0 lg:space-x-5 lg:items-center" class="flex flex-col lg:flex-row w-full lg:px-32 space-y-5 lg:space-y-0 lg:space-x-5 justify-start"
on:submit|preventDefault={loadBranches} on:submit|preventDefault={loadBranches}
> >
<div class="space-y-4 w-full"> <div class="space-y-2 w-full">
<input <input
class="w-full" class="w-full"
placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main" placeholder="eg: https://github.com/coollabsio/nodejs-example/tree/main"
@@ -170,6 +170,7 @@
{#if branchSelectOptions.length > 0} {#if branchSelectOptions.length > 0}
<div class="custom-select-wrapper"> <div class="custom-select-wrapper">
<Select <Select
class="w-full"
placeholder={loading.branches placeholder={loading.branches
? $t('application.configuration.loading_branches') ? $t('application.configuration.loading_branches')
: !publicRepositoryLink : !publicRepositoryLink

29
apps/ui/src/routes/applications/[id]/configuration/buildpack.svelte
View File

@@ -254,12 +254,6 @@
}); });
</script> </script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">
{$t('application.configuration.configure_build_pack')}
</div>
</div>
{#if scanning} {#if scanning}
<div class="flex justify-center space-x-1 p-6 font-bold"> <div class="flex justify-center space-x-1 p-6 font-bold">
<div class="text-xl tracking-tight"> <div class="text-xl tracking-tight">
@@ -267,18 +261,7 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="max-w-5xl mx-auto "> <div class="max-w-6xl mx-auto px-5">
<div class="title pb-2">Coolify</div>
<div class="flex flex-wrap justify-center">
{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true) as buildPack}
<div class="p-2">
<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
</div>
{/each}
</div>
</div>
<div class="max-w-5xl mx-auto ">
<div class="title pb-2">Other</div> <div class="title pb-2">Other</div>
<div class="flex flex-wrap justify-center"> <div class="flex flex-wrap justify-center">
{#each buildPacks.filter((bp) => bp.isHerokuBuildPack === true) as buildPack} {#each buildPacks.filter((bp) => bp.isHerokuBuildPack === true) as buildPack}
@@ -288,4 +271,14 @@
{/each} {/each}
</div> </div>
</div> </div>
<div class="max-w-6xl mx-auto px-5">
<div class="title pb-2">Coolify Custom</div>
<div class="flex flex-wrap justify-center">
{#each buildPacks.filter((bp) => bp.isCoolifyBuildPack === true) as buildPack}
<div class="p-2">
<BuildPack {packageManager} {buildPack} {scanning} bind:foundConfig />
</div>
{/each}
</div>
</div>
{/if} {/if}

2
apps/ui/src/routes/applications/[id]/configuration/database.svelte
View File

@@ -126,7 +126,7 @@
</div> </div>
{/if} {/if}
<div class="mx-auto max-w-4xl p-6"> <div class="mx-auto max-w-6xl p-6">
<div class="grid grid-flow-row gap-2 px-10"> <div class="grid grid-flow-row gap-2 px-10">
<div class="font-bold text-xl tracking-tight">Connect a Hosted / Remote Database</div> <div class="font-bold text-xl tracking-tight">Connect a Hosted / Remote Database</div>
<div class="mt-2 grid grid-cols-2 items-center px-4"> <div class="mt-2 grid grid-cols-2 items-center px-4">

15
apps/ui/src/routes/applications/[id]/configuration/destination.svelte
View File

@@ -63,19 +63,14 @@
}); });
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <div class="flex flex-col justify-center w-full">
<div class="mr-4 text-2xl tracking-tight">
{$t('application.configuration.configure_destination')}
</div>
</div>
<div class="flex flex-col justify-center">
{#if !destinations || ownDestinations.length === 0} {#if !destinations || ownDestinations.length === 0}
<div class="flex-col"> <div class="flex-col">
<div class="pb-2 text-center font-bold"> <div class="pb-2 text-center font-bold">
{$t('application.configuration.no_configurable_destination')} {$t('application.configuration.no_configurable_destination')}
</div> </div>
<div class="flex justify-center"> <div class="flex justify-center">
<a href="/new/destination" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500"> <a href="/destinations/new" sveltekit:prefetch class="add-icon bg-sky-600 hover:bg-sky-500">
<svg <svg
class="w-6" class="w-6"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -93,7 +88,7 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row"> <div class="flex flex-col flex-wrap justify-center px-2 md:flex-row mx-auto">
{#each ownDestinations as destination} {#each ownDestinations as destination}
<div class="p-2"> <div class="p-2">
<form on:submit|preventDefault={() => handleSubmit(destination.id)}> <form on:submit|preventDefault={() => handleSubmit(destination.id)}>
@@ -106,9 +101,9 @@
{/each} {/each}
</div> </div>
{#if otherDestinations.length > 0 && $appSession.teamId === '0'} {#if otherDestinations.length > 0 && $appSession.teamId === '0'}
<div class="px-6 pb-5 pt-10 text-xl font-bold">Other Destinations</div> <div class="px-6 pb-5 pt-10 title">Other Destinations</div>
{/if} {/if}
<div class="flex flex-col flex-wrap justify-center px-2 md:flex-row"> <div class="flex flex-col flex-wrap justify-center px-2 md:flex-row mx-auto">
{#each otherDestinations as destination} {#each otherDestinations as destination}
<div class="p-2"> <div class="p-2">
<form on:submit|preventDefault={() => handleSubmit(destination.id)}> <form on:submit|preventDefault={() => handleSubmit(destination.id)}>

7
apps/ui/src/routes/applications/[id]/configuration/source.svelte
View File

@@ -68,12 +68,7 @@
} }
</script> </script>
<div class="flex space-x-1 p-6 font-bold"> <div class="max-w-6xl mx-auto px-5">
<div class="mr-4 text-2xl tracking-tight">
{$t('application.configuration.select_a_git_source')}
</div>
</div>
<div class="max-w-5xl mx-auto px-5">
<div class="title pb-8">Git App</div> <div class="title pb-8">Git App</div>
<div class="flex flex-wrap justify-center"> <div class="flex flex-wrap justify-center">
{#if !filteredSources || ownSources.length === 0} {#if !filteredSources || ownSources.length === 0}

173
apps/ui/src/routes/applications/[id]/index.svelte
View File

@@ -94,7 +94,7 @@
} }
]; ];
function containerClass() { function containerClass() {
return 'text-white bg-transparent font-thin px-0 w-full'; return 'text-white bg-transparent font-thin px-0 w-full border-dashed border-coolgray-300';
} }
async function getUsage() { async function getUsage() {
@@ -294,62 +294,8 @@
} }
</script> </script>
<div class="flex items-center space-x-2 p-5 px-6 font-bold lg:hidden"> {#if $status.application.isRunning}
<div class="flex-col"> <div class="mx-auto max-w-6xl px-6 lg:my-0 my-4 lg:pt-0 pt-4 rounded">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Configuration
</div>
<span class="text-xs">{application.name}</span>
</div>
{#if application.gitSource?.htmlUrl && application.repository && application.branch}
<a
id="git"
href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
target="_blank"
class="w-10"
>
{#if application.gitSource?.type === 'gitlab'}
<svg viewBox="0 0 128 128" class="icons">
<path
fill="#FC6D26"
d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
fill="#FC6D26"
d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
/><path
fill="#FCA326"
d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
/><path
fill="#E24329"
d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
fill="#FCA326"
d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
/><path
fill="#E24329"
d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
/>
</svg>
{:else if application.gitSource?.type === 'github'}
<svg viewBox="0 0 128 128" class="icons">
<g fill="#ffffff"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
/><path
d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
/></g
>
</svg>
{/if}
</a>
<Tooltip triggeredBy="#git">Open on Git</Tooltip>
{/if}
</div>
<div class="mx-auto max-w-4xl px-6 pt-4">
<div class="text-2xl font-bold">Application Usage</div>
<div class="text-center"> <div class="text-center">
<div class="stat w-64"> <div class="stat w-64">
<div class="stat-title">Used Memory / Memory Limit</div> <div class="stat-title">Used Memory / Memory Limit</div>
@@ -366,11 +312,12 @@
<div class="stat-value text-xl">{usage?.NetIO}</div> <div class="stat-value text-xl">{usage?.NetIO}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="mx-auto max-w-4xl px-6"> {/if}
<div class="mx-auto max-w-6xl px-6 pb-12">
<!-- svelte-ignore missing-declaration --> <!-- svelte-ignore missing-declaration -->
<form on:submit|preventDefault={handleSubmit} class="py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex space-x-1 pb-5 justify-between items-center"> <div class="flex space-x-1 pb-5 items-center">
<h1 class="title">{$t('general')}</h1> <h1 class="title">{$t('general')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button <button
@@ -385,18 +332,17 @@
{/if} {/if}
</div> </div>
<div class="grid grid-flow-row gap-2 lg:px-10 pr-5"> <div class="grid grid-flow-row gap-2 lg:px-10 px-2 pr-5">
<div class="mt-2 grid grid-cols-2 items-center"> <div class="mt-2 grid grid-cols-2 items-center">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> <label for="name">{$t('forms.name')}</label>
<input name="name" id="name" bind:value={application.name} required /> <input name="name" id="name" class="w-full" bind:value={application.name} required />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="gitSource" class="text-base font-bold text-stone-100" <label for="gitSource">{$t('application.git_source')}</label>
>{$t('application.git_source')}</label
>
{#if isDisabled || application.settings.isPublicRepository} {#if isDisabled || application.settings.isPublicRepository}
<input <input
disabled={isDisabled || application.settings.isPublicRepository} disabled={isDisabled || application.settings.isPublicRepository}
class="w-full"
value={application.gitSource.name} value={application.gitSource.name}
/> />
{:else} {:else}
@@ -406,17 +352,16 @@
><input ><input
value={application.gitSource.name} value={application.gitSource.name}
id="gitSource" id="gitSource"
class="cursor-pointer hover:bg-coolgray-500" class="cursor-pointer hover:bg-coolgray-500 w-full"
/></a /></a
> >
{/if} {/if}
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="repository" class="text-base font-bold text-stone-100" <label for="repository">{$t('application.git_repository')}</label>
>{$t('application.git_repository')}</label
>
{#if isDisabled || application.settings.isPublicRepository} {#if isDisabled || application.settings.isPublicRepository}
<input <input
class="w-full"
disabled={isDisabled || application.settings.isPublicRepository} disabled={isDisabled || application.settings.isPublicRepository}
value="{application.repository}/{application.branch}" value="{application.repository}/{application.branch}"
/> />
@@ -427,34 +372,30 @@
><input ><input
value="{application.repository}/{application.branch}" value="{application.repository}/{application.branch}"
id="repository" id="repository"
class="cursor-pointer hover:bg-coolgray-500" class="cursor-pointer hover:bg-coolgray-500 w-full"
/></a /></a
> >
{/if} {/if}
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="buildPack" class="text-base font-bold text-stone-100" <label for="buildPack">{$t('application.build_pack')}</label>
>{$t('application.build_pack')}</label
>
{#if isDisabled} {#if isDisabled}
<input class="capitalize" disabled={isDisabled} value={application.buildPack} /> <input class="uppercase w-full" disabled={isDisabled} value={application.buildPack} />
{:else} {:else}
<a <a
href={`/applications/${id}/configuration/buildpack?from=/applications/${id}`} href={`/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"
class="cursor-pointer hover:bg-coolgray-500 capitalize" class="cursor-pointer hover:bg-coolgray-500 capitalize w-full"
/></a /></a
> >
{/if} {/if}
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="destination" class="text-base font-bold text-stone-100" <label for="destination">{$t('application.destination')}</label>
>{$t('application.destination')}</label
>
<div class="no-underline"> <div class="no-underline">
<input <input
value={application.destinationDocker.name} value={application.destinationDocker.name}
@@ -466,7 +407,7 @@
</div> </div>
{#if application.buildCommand || application.buildPack === 'rust' || application.buildPack === 'laravel'} {#if application.buildCommand || application.buildPack === 'rust' || application.buildPack === 'laravel'}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="baseBuildImage" class="text-base font-bold text-stone-100" <label for="baseBuildImage"
>{$t('application.base_build_image')} >{$t('application.base_build_image')}
<Explainer <Explainer
explanation={application.buildPack === 'laravel' explanation={application.buildPack === 'laravel'
@@ -476,7 +417,7 @@
</label> </label>
<Select <Select
{isDisabled} {isDisabled}
containerClasses={(isDisabled && containerClass()) || 'bg-neutral border-0 w-full'} containerClasses={isDisabled && containerClass()}
id="baseBuildImages" id="baseBuildImages"
showIndicator={!$status.application.isRunning} showIndicator={!$status.application.isRunning}
items={application.baseBuildImages} items={application.baseBuildImages}
@@ -488,13 +429,14 @@
{/if} {/if}
{#if application.buildPack !== 'docker'} {#if application.buildPack !== 'docker'}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="baseImage" class="text-base font-bold text-stone-100" <label for="baseImage"
>{$t('application.base_image')} >{$t('application.base_image')}
<Explainer explanation={'Image that will be used for the deployment.'} /></label <Explainer explanation={'Image that will be used for the deployment.'} /></label
> >
<div class="custom-select-wrapper">
<Select <Select
{isDisabled} {isDisabled}
containerClasses={(isDisabled && containerClass()) || 'bg-neutral border-0'} containerClasses={isDisabled && containerClass()}
id="baseImages" id="baseImages"
showIndicator={!$status.application.isRunning} showIndicator={!$status.application.isRunning}
items={application.baseImages} items={application.baseImages}
@@ -503,10 +445,11 @@
isClearable={false} isClearable={false}
/> />
</div> </div>
</div>
{/if} {/if}
{#if application.buildPack !== 'docker' && (application.buildPack === 'nextjs' || application.buildPack === 'nuxtjs')} {#if application.buildPack !== 'docker' && (application.buildPack === 'nextjs' || application.buildPack === 'nuxtjs')}
<div class="grid grid-cols-2 items-center pb-8"> <div class="grid grid-cols-2 items-center pb-8">
<label for="deploymentType" class="text-base font-bold text-stone-100" <label for="deploymentType"
>Deployment Type >Deployment Type
<Explainer <Explainer
explanation={"Defines how to deploy your application. <br><br><span class='text-green-500 font-bold'>Static</span> is for static websites, <span class='text-green-500 font-bold'>node</span> is for server-side applications."} explanation={"Defines how to deploy your application. <br><br><span class='text-green-500 font-bold'>Static</span> is for static websites, <span class='text-green-500 font-bold'>node</span> is for server-side applications."}
@@ -546,7 +489,7 @@
> >
{#if application.connectedDatabase} {#if application.connectedDatabase}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="baseImage" class="text-base font-bold text-stone-100" <label for="baseImage"
>Base Database >Base Database
<Explainer <Explainer
explanation={'The name of the database that will be used as base when branching.'} explanation={'The name of the database that will be used as base when branching.'}
@@ -568,9 +511,9 @@
{/if} {/if}
</div> </div>
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">{$t('application.application')}</div> <h1 class="title">{$t('application.application')}</h1>
</div> </div>
<div class="grid grid-flow-row gap-2 lg:px-10 pr-5"> <div class="grid grid-flow-row gap-2 lg:px-10 px-2 pr-5">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<Setting <Setting
id="isBot" id="isBot"
@@ -590,13 +533,13 @@
isCenter={false} isCenter={false}
bind:setting={dualCerts} bind:setting={dualCerts}
title={$t('application.ssl_www_and_non_www')} title={$t('application.ssl_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-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both." description="Generate certificates for both www and non-www. <br>You need to have <span class='font-bold text-settings'>both DNS entries</span> set in advance.<br><br>Useful if you expect to have visitors on both."
on:click={() => !$status.application.isRunning && changeSettings('dualCerts')} on:click={() => !$status.application.isRunning && changeSettings('dualCerts')}
/> />
</div> </div>
{#if !isBot} {#if !isBot}
<div class="grid grid-cols-2 items-center pb-8"> <div class="grid grid-cols-2 items-center pb-8">
<label for="fqdn" class="text-base font-bold text-stone-100" <label for="fqdn"
>{$t('application.url_fqdn')} >{$t('application.url_fqdn')}
<Explainer <Explainer
explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings 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.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"} explanation={"If you specify <span class='text-settings font-bold'>https</span>, the application will be accessible only over https.<br>SSL certificate will be generated automatically.<br><br>If you specify <span class='text-settings 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.<br><br><span class='text-settings font-bold'>You must set your DNS to point to the server IP in advance.</span>"}
@@ -604,6 +547,8 @@
</label> </label>
<div> <div>
<input <input
class="w-full"
required={!application.settings.isBot}
readonly={isDisabled} readonly={isDisabled}
disabled={isDisabled} disabled={isDisabled}
name="fqdn" name="fqdn"
@@ -651,14 +596,14 @@
{/if} {/if}
{#if application.buildPack === 'python'} {#if application.buildPack === 'python'}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="pythonModule" class="text-base font-bold text-stone-100">WSGI / ASGI</label> <label for="pythonModule">WSGI / ASGI</label>
<div class="custom-select-wrapper"> <div class="custom-select-wrapper">
<Select id="wsgi" items={wsgis} on:select={selectWSGI} value={application.pythonWSGI} /> <Select id="wsgi" items={wsgis} on:select={selectWSGI} value={application.pythonWSGI} />
</div> </div>
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="pythonModule" class="text-base font-bold text-stone-100">Module</label> <label for="pythonModule">Module</label>
<input <input
disabled={isDisabled} disabled={isDisabled}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
@@ -671,7 +616,7 @@
</div> </div>
{#if application.pythonWSGI?.toLowerCase() === 'gunicorn'} {#if application.pythonWSGI?.toLowerCase() === 'gunicorn'}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="pythonVariable" class="text-base font-bold text-stone-100">Variable</label> <label for="pythonVariable">Variable</label>
<input <input
disabled={isDisabled} disabled={isDisabled}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
@@ -685,7 +630,7 @@
{/if} {/if}
{#if application.pythonWSGI?.toLowerCase() === 'uvicorn'} {#if application.pythonWSGI?.toLowerCase() === 'uvicorn'}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="pythonVariable" class="text-base font-bold text-stone-100">Variable</label> <label for="pythonVariable">Variable</label>
<input <input
disabled={isDisabled} disabled={isDisabled}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
@@ -700,11 +645,12 @@
{/if} {/if}
{#if !staticDeployments.includes(application.buildPack)} {#if !staticDeployments.includes(application.buildPack)}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="port" class="text-base font-bold text-stone-100" <label for="port"
>{$t('forms.port')} >{$t('forms.port')}
<Explainer explanation={'The port your application listens on.'} /></label <Explainer explanation={'The port your application listens on.'} /></label
> >
<input <input
class="w-full"
disabled={isDisabled} disabled={isDisabled}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
name="port" name="port"
@@ -714,13 +660,14 @@
/> />
</div> </div>
{/if} {/if}
<div class="grid grid-cols-2 items-center pb-8"> <div class="grid grid-cols-2 items-center">
<label for="exposePort" class="text-base font-bold text-stone-100" <label for="exposePort"
>Exposed Port <Explainer >Exposed Port <Explainer
explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'} explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
/></label /></label
> >
<input <input
class="w-full"
readonly={!$appSession.isAdmin && !$status.application.isRunning} readonly={!$appSession.isAdmin && !$status.application.isRunning}
disabled={isDisabled} disabled={isDisabled}
name="exposePort" name="exposePort"
@@ -731,10 +678,9 @@
</div> </div>
{#if !notNodeDeployments.includes(application.buildPack)} {#if !notNodeDeployments.includes(application.buildPack)}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="installCommand" class="text-base font-bold text-stone-100" <label for="installCommand">{$t('application.install_command')}</label>
>{$t('application.install_command')}</label
>
<input <input
class="w-full"
disabled={isDisabled} disabled={isDisabled}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
name="installCommand" name="installCommand"
@@ -744,10 +690,9 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="buildCommand" class="text-base font-bold text-stone-100" <label for="buildCommand">{$t('application.build_command')}</label>
>{$t('application.build_command')}</label
>
<input <input
class="w-full"
disabled={isDisabled} disabled={isDisabled}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
name="buildCommand" name="buildCommand"
@@ -757,10 +702,9 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center pb-8"> <div class="grid grid-cols-2 items-center pb-8">
<label for="startCommand" class="text-base font-bold text-stone-100" <label for="startCommand">{$t('application.start_command')}</label>
>{$t('application.start_command')}</label
>
<input <input
class="w-full"
disabled={isDisabled} disabled={isDisabled}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
name="startCommand" name="startCommand"
@@ -772,12 +716,13 @@
{/if} {/if}
{#if application.buildPack === 'docker'} {#if application.buildPack === 'docker'}
<div class="grid grid-cols-2 items-center pt-4"> <div class="grid grid-cols-2 items-center pt-4">
<label for="dockerFileLocation" class="text-base font-bold text-stone-100" <label for="dockerFileLocation"
>Dockerfile Location <Explainer >Dockerfile Location <Explainer
explanation={"Should be absolute path, like <span class='text-settings font-bold'>/data/Dockerfile</span> or <span class='text-settings font-bold'>/Dockerfile.</span>"} explanation={"Should be absolute path, like <span class='text-settings font-bold'>/data/Dockerfile</span> or <span class='text-settings font-bold'>/Dockerfile.</span>"}
/></label /></label
> >
<input <input
class="w-full"
disabled={isDisabled} disabled={isDisabled}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
name="dockerFileLocation" name="dockerFileLocation"
@@ -789,8 +734,9 @@
{/if} {/if}
{#if application.buildPack === 'deno'} {#if application.buildPack === 'deno'}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="denoMainFile" class="text-base font-bold text-stone-100">Main File</label> <label for="denoMainFile">Main File</label>
<input <input
class="w-full"
disabled={isDisabled} disabled={isDisabled}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
name="denoMainFile" name="denoMainFile"
@@ -800,12 +746,13 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="denoOptions" class="text-base font-bold text-stone-100" <label for="denoOptions"
>Arguments <Explainer >Arguments <Explainer
explanation={"List of arguments to pass to <span class='text-settings font-bold'>deno run</span> command. Could include permissions, configurations files, etc."} explanation={"List of arguments to pass to <span class='text-settings font-bold'>deno run</span> command. Could include permissions, configurations files, etc."}
/></label /></label
> >
<input <input
class="w-full"
disabled={isDisabled} disabled={isDisabled}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
name="denoOptions" name="denoOptions"
@@ -818,7 +765,7 @@
{#if application.buildPack !== 'laravel' && application.buildPack !== 'heroku'} {#if application.buildPack !== 'laravel' && application.buildPack !== 'heroku'}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<div class="flex-col"> <div class="flex-col">
<label for="baseDirectory" class="pt-2 text-base font-bold text-stone-100" <label for="baseDirectory"
>{$t('forms.base_directory')} >{$t('forms.base_directory')}
<Explainer <Explainer
explanation={"Directory to use as the base for all commands.<br>Could be useful with <span class='text-settings font-bold'>monorepos</span>."} explanation={"Directory to use as the base for all commands.<br>Could be useful with <span class='text-settings font-bold'>monorepos</span>."}
@@ -826,6 +773,7 @@
> >
</div> </div>
<input <input
class="w-full"
disabled={isDisabled} disabled={isDisabled}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
name="baseDirectory" name="baseDirectory"
@@ -838,7 +786,7 @@
{#if !notNodeDeployments.includes(application.buildPack)} {#if !notNodeDeployments.includes(application.buildPack)}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<div class="flex-col"> <div class="flex-col">
<label for="publishDirectory" class="pt-2 text-base font-bold text-stone-100" <label for="publishDirectory"
>{$t('forms.publish_directory')} >{$t('forms.publish_directory')}
<Explainer <Explainer
explanation={"Directory containing all the assets for deployment. <br> For example: <span class='text-settings font-bold'>dist</span>,<span class='text-settings font-bold'>_site</span> or <span class='text-settings font-bold'>public</span>."} explanation={"Directory containing all the assets for deployment. <br> For example: <span class='text-settings font-bold'>dist</span>,<span class='text-settings font-bold'>_site</span> or <span class='text-settings font-bold'>public</span>."}
@@ -847,6 +795,7 @@
</div> </div>
<input <input
class="w-full"
disabled={isDisabled} disabled={isDisabled}
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
name="publishDirectory" name="publishDirectory"
@@ -862,7 +811,7 @@
<div class="flex space-x-1 pb-5 font-bold"> <div class="flex space-x-1 pb-5 font-bold">
<div class="title">{$t('application.features')}</div> <div class="title">{$t('application.features')}</div>
</div> </div>
<div class="lg:px-10 lg:pb-10 pb-6"> <div class="lg:px-10 px-2 lg:pb-10 pb-6">
{#if !application.settings.isPublicRepository} {#if !application.settings.isPublicRepository}
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<Setting <Setting

51
apps/ui/src/routes/applications/[id]/logs/build.svelte
View File

@@ -107,57 +107,6 @@
} }
</script> </script>
<div class="flex items-center space-x-2 p-5 px-6 font-bold">
<div class="-mb-5 flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
{$t('application.build_logs')}
</div>
<span class="text-xs">{application.name} </span>
</div>
{#if application.gitSource?.htmlUrl && application.repository && application.branch}
<a
href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
target="_blank"
class="w-10"
>
{#if application.gitSource?.type === 'gitlab'}
<svg viewBox="0 0 128 128" class="icons">
<path
fill="#FC6D26"
d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
fill="#FC6D26"
d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
/><path
fill="#FCA326"
d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
/><path
fill="#E24329"
d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
fill="#FCA326"
d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
/><path
fill="#E24329"
d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
/>
</svg>
{:else if application.gitSource?.type === 'github'}
<svg viewBox="0 0 128 128" class="icons">
<g fill="#ffffff"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
/><path
d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
/></g
>
</svg>
{/if}
</a>
{/if}
</div>
<div class="block flex-row justify-start space-x-2 px-5 pt-6 sm:px-10 md:flex"> <div class="block flex-row justify-start space-x-2 px-5 pt-6 sm:px-10 md:flex">
<div class="mb-4 min-w-[16rem] space-y-2 md:mb-0 "> <div class="mb-4 min-w-[16rem] space-y-2 md:mb-0 ">
<button class="btn btn-sm text-xs w-full bg-error" on:click={resetQueue} <button class="btn btn-sm text-xs w-full bg-error" on:click={resetQueue}

52
apps/ui/src/routes/applications/[id]/logs/index.svelte
View File

@@ -91,57 +91,7 @@
} }
</script> </script>
<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
<div class="-mb-5 flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Application Logs
</div>
<span class="text-xs">{application.name}</span>
</div>
{#if application.gitSource?.htmlUrl && application.repository && application.branch}
<a
href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
target="_blank"
class="w-10"
>
{#if application.gitSource?.type === 'gitlab'}
<svg viewBox="0 0 128 128" class="icons">
<path
fill="#FC6D26"
d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
fill="#FC6D26"
d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
/><path
fill="#FCA326"
d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
/><path
fill="#E24329"
d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
fill="#FCA326"
d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
/><path
fill="#E24329"
d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
/>
</svg>
{:else if application.gitSource?.type === 'github'}
<svg viewBox="0 0 128 128" class="icons">
<g fill="#ffffff"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
/><path
d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
/></g
>
</svg>
{/if}
</a>
{/if}
</div>
<div class="flex flex-row justify-center space-x-2 px-10 pt-6"> <div class="flex flex-row justify-center space-x-2 px-10 pt-6">
{#if logs.length === 0} {#if logs.length === 0}
<div class="text-xl font-bold tracking-tighter">{$t('application.build.waiting_logs')}</div> <div class="text-xl font-bold tracking-tighter">{$t('application.build.waiting_logs')}</div>

76
apps/ui/src/routes/applications/[id]/previews/index.svelte
View File

@@ -29,6 +29,7 @@
import SimpleExplainer from '$lib/components/SimpleExplainer.svelte'; import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
import Tooltip from '$lib/components/Tooltip.svelte'; import Tooltip from '$lib/components/Tooltip.svelte';
import DeleteIcon from '$lib/components/DeleteIcon.svelte'; import DeleteIcon from '$lib/components/DeleteIcon.svelte';
import Explainer from '$lib/components/Explainer.svelte';
const { id } = $page.params; const { id } = $page.params;
let loadBuildingStatusInterval: any = null; let loadBuildingStatusInterval: any = null;
@@ -119,7 +120,7 @@
return 'error'; return 'error';
} finally { } finally {
numberOfGetStatus--; numberOfGetStatus--;
status = status status = status;
} }
} }
async function restartPreview(preview: any) { async function restartPreview(preview: any) {
@@ -176,56 +177,12 @@
}); });
</script> </script>
<div class="flex items-center space-x-2 p-5 px-6 font-bold"> <div class="flex justify-center">
<div class="flex flex-col justify-center py-4 text-center"> <SimpleExplainer
<h1 class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block font-bold mb-4"> text={applicationSecrets && applicationSecrets.length === 0
Preview Deployments ? "To have Preview Secerts, please add them to the main application. <br><br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."
</h1> : "These values overwrite application secrets in PR/MR deployments. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."}
<span class="text-xs">{application?.name}</span>
</div>
{#if application.gitSource?.htmlUrl && application.repository && application.branch}
<a
href="{application.gitSource.htmlUrl}/{application.repository}/tree/{application.branch}"
target="_blank"
class="w-10"
>
{#if application.gitSource?.type === 'gitlab'}
<svg viewBox="0 0 128 128" class="icons">
<path
fill="#FC6D26"
d="M126.615 72.31l-7.034-21.647L105.64 7.76c-.716-2.206-3.84-2.206-4.556 0l-13.94 42.903H40.856L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664 1.385 72.31a4.792 4.792 0 001.74 5.358L64 121.894l60.874-44.227a4.793 4.793 0 001.74-5.357"
/><path fill="#E24329" d="M64 121.894l23.144-71.23H40.856L64 121.893z" /><path
fill="#FC6D26"
d="M64 121.894l-23.144-71.23H8.42L64 121.893z"
/><path
fill="#FCA326"
d="M8.42 50.663L1.384 72.31a4.79 4.79 0 001.74 5.357L64 121.894 8.42 50.664z"
/><path
fill="#E24329"
d="M8.42 50.663h32.436L26.916 7.76c-.717-2.206-3.84-2.206-4.557 0L8.42 50.664z"
/><path fill="#FC6D26" d="M64 121.894l23.144-71.23h32.437L64 121.893z" /><path
fill="#FCA326"
d="M119.58 50.663l7.035 21.647a4.79 4.79 0 01-1.74 5.357L64 121.894l55.58-71.23z"
/><path
fill="#E24329"
d="M119.58 50.663H87.145l13.94-42.902c.717-2.206 3.84-2.206 4.557 0l13.94 42.903z"
/> />
</svg>
{:else if application.gitSource?.type === 'github'}
<svg viewBox="0 0 128 128" class="icons">
<g fill="#ffffff"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M64 5.103c-33.347 0-60.388 27.035-60.388 60.388 0 26.682 17.303 49.317 41.297 57.303 3.017.56 4.125-1.31 4.125-2.905 0-1.44-.056-6.197-.082-11.243-16.8 3.653-20.345-7.125-20.345-7.125-2.747-6.98-6.705-8.836-6.705-8.836-5.48-3.748.413-3.67.413-3.67 6.063.425 9.257 6.223 9.257 6.223 5.386 9.23 14.127 6.562 17.573 5.02.542-3.903 2.107-6.568 3.834-8.076-13.413-1.525-27.514-6.704-27.514-29.843 0-6.593 2.36-11.98 6.223-16.21-.628-1.52-2.695-7.662.584-15.98 0 0 5.07-1.623 16.61 6.19C53.7 35 58.867 34.327 64 34.304c5.13.023 10.3.694 15.127 2.033 11.526-7.813 16.59-6.19 16.59-6.19 3.287 8.317 1.22 14.46.593 15.98 3.872 4.23 6.215 9.617 6.215 16.21 0 23.194-14.127 28.3-27.574 29.796 2.167 1.874 4.097 5.55 4.097 11.183 0 8.08-.07 14.583-.07 16.572 0 1.607 1.088 3.49 4.148 2.897 23.98-7.994 41.263-30.622 41.263-57.294C124.388 32.14 97.35 5.104 64 5.104z"
/><path
d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm2.446 2.729c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zM31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm3.261 3.361c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm4.5 1.951c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm4.943.361c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm4.598-.782c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
/></g
>
</svg>
{/if}
</a>
{/if}
</div> </div>
{#if loading.init} {#if loading.init}
<div class="mx-auto max-w-6xl px-6 pt-4"> <div class="mx-auto max-w-6xl px-6 pt-4">
@@ -233,21 +190,8 @@
</div> </div>
{:else} {:else}
<div class="mx-auto max-w-6xl px-6 pt-4"> <div class="mx-auto max-w-6xl px-6 pt-4">
<div class="flex justify-center py-4 text-center">
<SimpleExplainer
customClass="w-full"
text={applicationSecrets.length === 0
? "You can add secrets to PR/MR deployments. Please add secrets to the application first. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."
: "These values overwrite application secrets in PR/MR deployments. <br>Useful for creating <span class='text-green-500 font-bold'>staging</span> environments."}
/>
</div>
<div class="text-center"> <div class="text-center">
<SimpleExplainer <button class="btn btn-sm bg-coollabs" on:click={loadPreviewsFromDocker}>Load Previews</button
customClass="w-full"
text={'If your preview is not shown, try load them directly from Docker Engine.<br>(Changed previews process flow in <span class="font-bold text-white">v3.10.4</span>)'}
/>
<button class="btn btn-sm bg-coollabs" on:click={loadPreviewsFromDocker}
>Fetch Previews</button
> >
</div> </div>
{#if applicationSecrets.length !== 0} {#if applicationSecrets.length !== 0}
@@ -427,10 +371,6 @@
</div> </div>
{/each} {/each}
</div> </div>
{:else}
<div class="flex-col">
<div class="text-center font-bold text-xl pb-10">Previews will shown here.</div>
</div>
{/if} {/if}
</div> </div>
{/if} {/if}

3
apps/ui/src/routes/applications/[id]/secrets.svelte
View File

@@ -68,9 +68,6 @@
</script> </script>
<div class="mx-auto max-w-6xl px-6 pt-4"> <div class="mx-auto max-w-6xl px-6 pt-4">
<h1 class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block font-bold mb-4">
Secrets
</h1>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="mx-auto border-separate text-left"> <table class="mx-auto border-separate text-left">
<thead> <thead>

12
apps/ui/src/routes/applications/[id]/storages.svelte
View File

@@ -5,7 +5,6 @@
const response = await get(`/applications/${params.id}/storages`); const response = await get(`/applications/${params.id}/storages`);
return { return {
props: { props: {
application: stuff.application,
...response ...response
} }
}; };
@@ -19,13 +18,12 @@
</script> </script>
<script lang="ts"> <script lang="ts">
export let application: any;
export let persistentStorages: any; export let persistentStorages: any;
import { page } from '$app/stores'; import { page } from '$app/stores';
import Storage from './_Storage.svelte'; import Storage from './_Storage.svelte';
import { get } from '$lib/api'; import { get } from '$lib/api';
import SimpleExplainer from '$lib/components/SimpleExplainer.svelte';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import Explainer from '$lib/components/Explainer.svelte';
const { id } = $page.params; const { id } = $page.params;
async function refreshStorage() { async function refreshStorage() {
@@ -36,16 +34,10 @@
<div class="mx-auto max-w-6xl rounded-xl px-6 pt-4"> <div class="mx-auto max-w-6xl rounded-xl px-6 pt-4">
<div class="flex flex-col justify-center py-4 text-center">
<h1 class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block font-bold mb-4">
Persistent Storage
</h1>
<SimpleExplainer customClass="w-full" text={$t('application.storage.persistent_storage_explainer')} />
</div>
<table class="mx-auto border-separate text-left"> <table class="mx-auto border-separate text-left">
<thead> <thead>
<tr class="h-12"> <tr class="h-12">
<th scope="col">{$t('forms.path')}</th> <th scope="col">{$t('forms.path')} <Explainer explanation={$t('application.storage.persistent_storage_explainer')} /></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

18
apps/ui/src/routes/databases/[id]/_Databases/_CouchDb.svelte
View File

@@ -7,11 +7,9 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<h1 class="title">CouchDB</h1> <h1 class="title">CouchDB</h1>
</div> </div>
<div class="space-y-2 lg:px-10"> <div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100" <label for="defaultDatabase">{$t('database.default_database')}</label>
>{$t('database.default_database')}</label
>
<CopyPasswordField <CopyPasswordField
required required
readonly={database.defaultDatabase} readonly={database.defaultDatabase}
@@ -23,7 +21,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label> <label for="dbUser">{$t('forms.user')}</label>
<CopyPasswordField <CopyPasswordField
readonly readonly
disabled disabled
@@ -34,9 +32,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100" <label for="dbUserPassword">{$t('forms.password')}</label>
>{$t('forms.password')}</label
>
<CopyPasswordField <CopyPasswordField
readonly readonly
disabled disabled
@@ -48,7 +44,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label> <label for="rootUser">{$t('forms.root_user')}</label>
<CopyPasswordField <CopyPasswordField
readonly readonly
disabled disabled
@@ -59,9 +55,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUserPassword" class="text-base font-bold text-stone-100" <label for="rootUserPassword">{$t('forms.roots_password')}</label>
>{$t('forms.roots_password')}</label
>
<CopyPasswordField <CopyPasswordField
readonly readonly
disabled disabled

34
apps/ui/src/routes/databases/[id]/_Databases/_Databases.svelte
View File

@@ -107,22 +107,22 @@
} }
</script> </script>
<div class="mx-auto max-w-4xl p-4"> <div class="mx-auto max-w-6xl p-4">
<form on:submit|preventDefault={handleSubmit} class="py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex flex-col lg:flex-row justify-between lg:space-x-1 space-y-3 pb-5 lg:items-center items-start"> <div class="flex space-x-1 pb-5 items-center">
<h1 class="title">{$t('general')}</h1> <h1 class="title">{$t('general')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button <button
type="submit" type="submit"
class="btn btn-sm w-full lg:w-auto" class="btn btn-sm"
class:loading class:loading
class:bg-databases={!loading} class:bg-databases={!loading}
disabled={loading}>{$t('forms.save')}</button disabled={loading}>{$t('forms.save')}</button
> >
{/if} {/if}
</div> </div>
<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10"> <div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 px-2">
<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label> <label for="name">{$t('forms.name')}</label>
<input <input
class="w-full" class="w-full"
readonly={!$appSession.isAdmin} readonly={!$appSession.isAdmin}
@@ -131,9 +131,7 @@
bind:value={database.name} bind:value={database.name}
required required
/> />
<label for="destination" class="text-base font-bold text-stone-100" <label for="destination">{$t('application.destination')}</label>
>{$t('application.destination')}</label
>
{#if database.destinationDockerId} {#if database.destinationDockerId}
<div class="no-underline"> <div class="no-underline">
<input <input
@@ -145,7 +143,7 @@
/> />
</div> </div>
{/if} {/if}
<label for="version" class="text-base font-bold text-stone-100">Version / Tag</label> <label for="version">Version / Tag</label>
<a <a
href={$appSession.isAdmin && !$status.database.isRunning href={$appSession.isAdmin && !$status.database.isRunning
? `/databases/${id}/configuration/version?from=/databases/${id}` ? `/databases/${id}/configuration/version?from=/databases/${id}`
@@ -160,7 +158,7 @@
class:cursor-pointer={!$status.database.isRunning} class:cursor-pointer={!$status.database.isRunning}
/></a /></a
> >
<label for="host" class="text-base font-bold text-stone-100">{$t('forms.host')}</label> <label for="host">{$t('forms.host')}</label>
<CopyPasswordField <CopyPasswordField
placeholder={$t('forms.generated_automatically_after_start')} placeholder={$t('forms.generated_automatically_after_start')}
isPasswordField={false} isPasswordField={false}
@@ -170,14 +168,18 @@
name="host" name="host"
value={database.id} value={database.id}
/> />
<label for="publicPort" class="text-base font-bold text-stone-100">{$t('forms.port')}</label> <label for="publicPort">{$t('forms.port')}</label>
<CopyPasswordField <CopyPasswordField
placeholder={$t('database.generated_automatically_after_set_to_public')} placeholder={$t('database.generated_automatically_after_set_to_public')}
id="publicPort" id="publicPort"
readonly readonly
disabled disabled
name="publicPort" name="publicPort"
value={publicLoading ? 'Loading...' : $status.database.isPublic ? database.publicPort : privatePort} value={publicLoading
? 'Loading...'
: $status.database.isPublic
? database.publicPort
: privatePort}
/> />
</div> </div>
{#if database.type === 'mysql'} {#if database.type === 'mysql'}
@@ -195,9 +197,9 @@
{:else if database.type === 'edgedb'} {:else if database.type === 'edgedb'}
<EdgeDB {database} /> <EdgeDB {database} />
{/if} {/if}
<div class="flex flex-col space-y-3 mt-5"> <div class="flex flex-col space-y-2 mt-5">
<div> <div>
<label for="url" class="text-base font-bold text-stone-100" <label class="px-2" for="url"
>{$t('database.connection_string')} >{$t('database.connection_string')}
{#if !$status.database.isPublic && database.destinationDocker.remoteEngine} {#if !$status.database.isPublic && database.destinationDocker.remoteEngine}
<Explainer <Explainer
@@ -206,7 +208,7 @@
{/if}</label {/if}</label
> >
</div> </div>
<div class="lg:px-10"> <div class="lg:px-10 px-2">
<CopyPasswordField <CopyPasswordField
textarea={true} textarea={true}
placeholder={$t('forms.generated_automatically_after_start')} placeholder={$t('forms.generated_automatically_after_start')}
@@ -223,7 +225,7 @@
<div class="flex space-x-1 pb-5 font-bold"> <div class="flex space-x-1 pb-5 font-bold">
<h1 class="title">{$t('application.features')}</h1> <h1 class="title">{$t('application.features')}</h1>
</div> </div>
<div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10"> <div class="grid gap-4 grid-cols-2 auto-rows-max lg:px-10 px-2">
<Setting <Setting
id="isPublic" id="isPublic"
loading={publicLoading} loading={publicLoading}

10
apps/ui/src/routes/databases/[id]/_Databases/_EdgeDB.svelte
View File

@@ -9,11 +9,9 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">EdgeDB</div> <div class="title">EdgeDB</div>
</div> </div>
<div class="space-y-2 px-10"> <div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100" <label for="defaultDatabase">{$t('database.default_database')}</label>
>{$t('database.default_database')}</label
>
<CopyPasswordField <CopyPasswordField
required required
readonly={database.defaultDatabase} readonly={database.defaultDatabase}
@@ -25,7 +23,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label> <label for="rootUser">{$t('forms.root_user')}</label>
<CopyPasswordField <CopyPasswordField
readonly readonly
disabled disabled
@@ -36,7 +34,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100" <label for="rootUser"
>Root Password <Explainer >Root Password <Explainer
explanation="Could be changed while the database is running." explanation="Could be changed while the database is running."
/></label /></label

12
apps/ui/src/routes/databases/[id]/_Databases/_MariaDB.svelte
View File

@@ -9,9 +9,9 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<h1 class="title">MariaDB</h1> <h1 class="title">MariaDB</h1>
</div> </div>
<div class="space-y-2 lg:px-10"> <div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100" <label for="defaultDatabase"
>{$t('database.default_database')}</label >{$t('database.default_database')}</label
> >
<CopyPasswordField <CopyPasswordField
@@ -25,7 +25,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label> <label for="dbUser" >{$t('forms.user')}</label>
<CopyPasswordField <CopyPasswordField
readonly readonly
disabled disabled
@@ -36,7 +36,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100" <label for="dbUserPassword"
>{$t('forms.password')} >{$t('forms.password')}
<Explainer explanation="Could be changed while the database is running." /></label <Explainer explanation="Could be changed while the database is running." /></label
> >
@@ -51,7 +51,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label> <label for="rootUser" >{$t('forms.root_user')}</label>
<CopyPasswordField <CopyPasswordField
readonly readonly
disabled disabled
@@ -62,7 +62,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUserPassword" class="text-base font-bold text-stone-100" <label for="rootUserPassword"
>{$t('forms.roots_password')} >{$t('forms.roots_password')}
<Explainer explanation="Could be changed while the database is running." /></label <Explainer explanation="Could be changed while the database is running." /></label
> >

6
apps/ui/src/routes/databases/[id]/_Databases/_MongoDB.svelte
View File

@@ -9,9 +9,9 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<h1 class="title">MongoDB</h1> <h1 class="title">MongoDB</h1>
</div> </div>
<div class="space-y-2 lg:px-10"> <div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label> <label for="rootUser">{$t('forms.root_user')}</label>
<CopyPasswordField <CopyPasswordField
placeholder={$t('forms.generated_automatically_after_start')} placeholder={$t('forms.generated_automatically_after_start')}
id="rootUser" id="rootUser"
@@ -22,7 +22,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUserPassword" class="text-base font-bold text-stone-100" <label for="rootUserPassword"
>{$t('forms.roots_password')} >{$t('forms.roots_password')}
<Explainer explanation="Could be changed while the database is running." /></label <Explainer explanation="Could be changed while the database is running." /></label
> >

14
apps/ui/src/routes/databases/[id]/_Databases/_MySQL.svelte
View File

@@ -9,11 +9,9 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<h1 class="title">MySQL</h1> <h1 class="title">MySQL</h1>
</div> </div>
<div class="space-y-2 lg:px-10"> <div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100" <label for="defaultDatabase">{$t('database.default_database')}</label>
>{$t('database.default_database')}</label
>
<CopyPasswordField <CopyPasswordField
required required
readonly={database.defaultDatabase} readonly={database.defaultDatabase}
@@ -25,7 +23,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label> <label for="dbUser">{$t('forms.user')}</label>
<CopyPasswordField <CopyPasswordField
readonly readonly
disabled disabled
@@ -36,7 +34,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100" <label for="dbUserPassword"
>{$t('forms.password')} >{$t('forms.password')}
<Explainer explanation="Could be changed while the database is running." /></label <Explainer explanation="Could be changed while the database is running." /></label
> >
@@ -51,7 +49,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100">{$t('forms.root_user')}</label> <label for="rootUser">{$t('forms.root_user')}</label>
<CopyPasswordField <CopyPasswordField
readonly readonly
disabled disabled
@@ -62,7 +60,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUserPassword" class="text-base font-bold text-stone-100" <label for="rootUserPassword"
>{$t('forms.roots_password')} >{$t('forms.roots_password')}
<Explainer explanation="Could be changed while the database is running." /></label <Explainer explanation="Could be changed while the database is running." /></label
> >

12
apps/ui/src/routes/databases/[id]/_Databases/_PostgreSQL.svelte
View File

@@ -9,11 +9,9 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<h1 class="title">PostgreSQL</h1> <h1 class="title">PostgreSQL</h1>
</div> </div>
<div class="space-y-2 lg:px-10"> <div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="defaultDatabase" class="text-base font-bold text-stone-100" <label for="defaultDatabase">{$t('database.default_database')}</label>
>{$t('database.default_database')}</label
>
<CopyPasswordField <CopyPasswordField
required required
readonly={database.defaultDatabase} readonly={database.defaultDatabase}
@@ -25,7 +23,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="rootUser" class="text-base font-bold text-stone-100" <label for="rootUser"
>Postgres User Password <Explainer >Postgres User Password <Explainer
explanation="Could be changed while the database is running." explanation="Could be changed while the database is running."
/></label /></label
@@ -41,7 +39,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="dbUser" class="text-base font-bold text-stone-100">{$t('forms.user')}</label> <label for="dbUser">{$t('forms.user')}</label>
<CopyPasswordField <CopyPasswordField
readonly readonly
disabled disabled
@@ -52,7 +50,7 @@
/> />
</div> </div>
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100" <label for="dbUserPassword"
>{$t('forms.password')} >{$t('forms.password')}
<Explainer explanation="Could be changed while the database is running." /></label <Explainer explanation="Could be changed while the database is running." /></label
> >

4
apps/ui/src/routes/databases/[id]/_Databases/_Redis.svelte
View File

@@ -9,9 +9,9 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<h1 class="title">Redis</h1> <h1 class="title">Redis</h1>
</div> </div>
<div class="space-y-2 lg:px-10"> <div class="space-y-2 lg:px-10 px-2">
<div class="grid grid-cols-2 items-center"> <div class="grid grid-cols-2 items-center">
<label for="dbUserPassword" class="text-base font-bold text-stone-100" <label for="dbUserPassword"
>{$t('forms.password')} >{$t('forms.password')}
<Explainer explanation="Could be changed while the database is running." /></label <Explainer explanation="Could be changed while the database is running." /></label
> >

36
apps/ui/src/routes/databases/[id]/__layout.svelte
View File

@@ -150,25 +150,33 @@
</script> </script>
{#if id !== 'new'} {#if id !== 'new'}
<nav class="header justify-center lg:justify-between"> <nav class="header lg:flex-row flex-col-reverse">
<div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex"> <div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
<div class="flex flex-col"> <div class="flex flex-col items-center justify-center">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block"> <div class="title">
Configuration {#if $page.url.pathname === `/databases/${id}`}
Configurations
{:else if $page.url.pathname === `/databases/${id}/logs`}
Database Logs
{:else if $page.url.pathname === `/databases/${id}/configuration/type`}
Select a Database Type
{:else if $page.url.pathname === `/databases/${id}/configuration/version`}
Select a Database Version
{:else if $page.url.pathname === `/databases/${id}/configuration/destination`}
Select a Destination
{/if}
</div> </div>
<span class="text-xs">{database.name}</span>
</div> </div>
<DatabaseLinks {database} /> <DatabaseLinks {database} />
</div> </div>
<div <div class="lg:block hidden flex-1" />
class="flex flex-row flex-wrap space-x-4 space-y-3 justify-center lg:justify-start py-2 lg:py-0" <div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
>
{#if database.type && database.destinationDockerId && database.version} {#if database.type && database.destinationDockerId && database.version}
{#if $status.database.isExited} {#if $status.database.isExited}
<a <a
id="exited" id="exited"
href={!$status.database.isRunning ? `/databases/${id}/logs` : null} href={!$status.database.isRunning ? `/databases/${id}/logs` : null}
class="icons bg-transparent text-sm flex items-center text-red-500 tooltip-error" class="icons bg-transparent text-red-500 tooltip-error"
sveltekit:prefetch sveltekit:prefetch
> >
<svg <svg
@@ -192,9 +200,7 @@
<Tooltip triggeredBy="#exited">{'Service exited with an error!'}</Tooltip> <Tooltip triggeredBy="#exited">{'Service exited with an error!'}</Tooltip>
{/if} {/if}
{#if $status.database.initialLoading} {#if $status.database.initialLoading}
<button <button class="icons flex animate-spin duration-500 ease-in-out">
class="icons flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" class="h-6 w-6"
@@ -220,7 +226,7 @@
on:click={stopDatabase} on:click={stopDatabase}
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class="icons bg-transparent text-sm flex items-center space-x-2 text-red-500 mt-3" class="icons bg-transparent text-red-500"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -346,7 +352,7 @@
> >
{/if} {/if}
<Tooltip triggeredBy="#delete">{'Delete'}</Tooltip> <Tooltip triggeredBy="#delete" placement="left">Delete</Tooltip>
</div> </div>
</nav> </nav>
{/if} {/if}

5
apps/ui/src/routes/databases/[id]/configuration/destination.svelte
View File

@@ -53,11 +53,6 @@
}); });
</script> </script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">
{$t('application.configuration.configure_destination')}
</div>
</div>
<div class="flex justify-center"> <div class="flex justify-center">
{#if !destinations || destinations.length === 0} {#if !destinations || destinations.length === 0}
<div class="flex-col"> <div class="flex-col">

4
apps/ui/src/routes/databases/[id]/configuration/type.svelte
View File

@@ -47,10 +47,6 @@
} }
</script> </script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('database.select_database_type')}</div>
</div>
<div class="flex flex-wrap justify-center"> <div class="flex flex-wrap justify-center">
{#each types as type} {#each types as type}
<div class="p-2"> <div class="p-2">

3
apps/ui/src/routes/databases/[id]/configuration/version.svelte
View File

@@ -46,9 +46,6 @@
} }
</script> </script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('database.select_database_version')}</div>
</div>
{#if from} {#if from}
<div class="pb-10 text-center"> <div class="pb-10 text-center">
Warning: you are about to change the version of this database.<br />This could cause problem Warning: you are about to change the version of this database.<br />This could cause problem

17
apps/ui/src/routes/databases/[id]/index.svelte
View File

@@ -48,18 +48,8 @@
}); });
</script> </script>
<div class="flex items-center space-x-2 p-5 font-bold lg:hidden"> {#if $status.database.isRunning}
<div class="flex-col"> <div class="mx-auto max-w-6xl p-5">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Configuration
</div>
<span class="text-xs">{database.name}</span>
</div>
<DatabaseLinks {database} />
</div>
<div class="mx-auto max-w-4xl p-5">
<div class="text-2xl font-bold">Database Usage</div>
<div class="text-center"> <div class="text-center">
<div class="stat w-64"> <div class="stat w-64">
<div class="stat-title">Used Memory / Memory Limit</div> <div class="stat-title">Used Memory / Memory Limit</div>
@@ -76,5 +66,6 @@
<div class="stat-value text-xl">{usage?.NetIO}</div> <div class="stat-value text-xl">{usage?.NetIO}</div>
</div> </div>
</div> </div>
</div> </div>
{/if}
<Databases bind:database {privatePort} /> <Databases bind:database {privatePort} />

8
apps/ui/src/routes/databases/[id]/logs/index.svelte
View File

@@ -91,14 +91,6 @@
} }
</script> </script>
<div class="flex h-20 items-center space-x-2 p-5 px-6 font-bold">
<div class="-mb-5 flex-col">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Database Logs
</div>
<span class="text-xs">{database.name}</span>
</div>
</div>
<div class="flex flex-row justify-center space-x-2 px-10 pt-6"> <div class="flex flex-row justify-center space-x-2 px-10 pt-6">
{#if logs.length === 0} {#if logs.length === 0}
<div class="text-xl font-bold tracking-tighter">{$t('application.build.waiting_logs')}</div> <div class="text-xl font-bold tracking-tighter">{$t('application.build.waiting_logs')}</div>

2
apps/ui/src/routes/destinations/[id]/_Destination.svelte
View File

@@ -16,7 +16,7 @@
</div> </div>
</div> </div>
<div class="mx-auto max-w-4xl px-6"> <div class="mx-auto max-w-6xl px-6">
{#if destination.remoteEngine} {#if destination.remoteEngine}
<RemoteDocker bind:destination {settings} {state} /> <RemoteDocker bind:destination {settings} {state} />
{:else} {:else}

6
apps/ui/src/routes/iam/index.svelte
View File

@@ -127,7 +127,7 @@
<br /> <br />
{#if invitations.length > 0} {#if invitations.length > 0}
<div class="mx-auto max-w-4xl px-6 py-4"> <div class="mx-auto max-w-6xl px-6 py-4">
<div class="title font-bold">Pending invitations</div> <div class="title font-bold">Pending invitations</div>
<div class="pt-10 text-center"> <div class="pt-10 text-center">
{#each invitations as invitation} {#each invitations as invitation}
@@ -149,7 +149,7 @@
</div> </div>
</div> </div>
{/if} {/if}
<div class="mx-auto max-w-4xl px-6 py-4"> <div class="mx-auto max-w-6xl px-6 py-4">
{#if $appSession.teamId === '0' && accounts.length > 0} {#if $appSession.teamId === '0' && accounts.length > 0}
<div class="title font-bold">Accounts</div> <div class="title font-bold">Accounts</div>
{:else} {:else}
@@ -189,7 +189,7 @@
</div> </div>
</div> </div>
<div class="mx-auto max-w-4xl px-6"> <div class="mx-auto max-w-6xl px-6">
<div class="title font-bold">Teams</div> <div class="title font-bold">Teams</div>
<div class="flex-col items-center justify-center pt-10"> <div class="flex-col items-center justify-center pt-10">
<div class="flex flex-row flex-wrap justify-center px-2 pb-10 md:flex-row"> <div class="flex flex-row flex-wrap justify-center px-2 pb-10 md:flex-row">

2
apps/ui/src/routes/iam/team/[id]/index.svelte
View File

@@ -87,7 +87,7 @@
<span class="arrow-right-applications px-1 text-fuchsia-500">></span> <span class="arrow-right-applications px-1 text-fuchsia-500">></span>
<span class="pr-2">{team.name}</span> <span class="pr-2">{team.name}</span>
</div> </div>
<div class="mx-auto max-w-4xl px-6"> <div class="mx-auto max-w-6xl px-6">
<form on:submit|preventDefault={handleSubmit} class=" py-4"> <form on:submit|preventDefault={handleSubmit} class=" py-4">
<div class="flex space-x-1 pb-5"> <div class="flex space-x-1 pb-5">
<div class="title font-bold">{$t('index.settings')}</div> <div class="title font-bold">{$t('index.settings')}</div>

8
apps/ui/src/routes/index.svelte
View File

@@ -28,8 +28,7 @@
export let destinations: any; export let destinations: any;
let filtered: any = setInitials(); let filtered: any = setInitials();
import { get, post } from '$lib/api'; import { get } from '$lib/api';
import Usage from '$lib/components/Usage.svelte';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { asyncSleep, getRndInteger } from '$lib/common'; import { asyncSleep, getRndInteger } from '$lib/common';
import { appSession, search, addToast} from '$lib/store'; import { appSession, search, addToast} from '$lib/store';
@@ -274,16 +273,13 @@
</script> </script>
<nav class="header p-7"> <nav class="header">
<h1 class="mr-4 text-2xl font-bold">{$t('index.dashboard')}</h1> <h1 class="mr-4 text-2xl font-bold">{$t('index.dashboard')}</h1>
{#if $appSession.isAdmin && (applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0)} {#if $appSession.isAdmin && (applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0)}
<NewResource /> <NewResource />
{/if} {/if}
</nav> </nav>
<div class="container lg:mx-auto lg:p-0 px-8 pt-5"> <div class="container lg:mx-auto lg:p-0 px-8 pt-5">
<!-- {#if $appSession.teamId === '0'}
<Usage />
{/if} -->
{#if applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0} {#if applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0}
<div class="form-control"> <div class="form-control">
<div class="input-group flex w-full"> <div class="input-group flex w-full">

79
apps/ui/src/routes/services/[id]/_Services/_Appwrite.svelte
View File

@@ -10,8 +10,9 @@
<div class="title">Appwrite</div> <div class="title">Appwrite</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="space-y-2">
<label class="text-base font-bold text-stone-100" for="opensslKeyV1">Encryption Key</label> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label for="opensslKeyV1">Encryption Key</label>
<CopyPasswordField <CopyPasswordField
name="opensslKeyV1" name="opensslKeyV1"
id="opensslKeyV1" id="opensslKeyV1"
@@ -20,9 +21,9 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="executorSecret">Executor Secret</label> <label for="executorSecret">Executor Secret</label>
<CopyPasswordField <CopyPasswordField
name="executorSecret" name="executorSecret"
id="executorSecret" id="executorSecret"
@@ -31,49 +32,14 @@
readonly readonly
disabled disabled
/> />
</div>
</div> </div>
<!-- <div class="flex space-x-1 py-5 font-bold">
<div class="title">Redis</div>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label class="text-base font-bold text-stone-100" for="redisPassword">Password</label>
<CopyPasswordField
name="redisPassword"
id="redisPassword"
isPasswordField
value={service.appwrite.redisPassword}
readonly
disabled
/>
</div> -->
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MariaDB</div> <div class="title">MariaDB</div>
</div> </div>
<div class="space-y-2">
<!-- <div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mariadbHost">MariaDB Host</label> <label for="mariadbUser">{$t('forms.username')}</label>
<CopyPasswordField
name="mariadbHost"
id="mariadbHost"
value={service.appwrite.mariadbHost}
readonly
disabled
/>
</div>
<div class="grid grid-cols-2 items-center px-10">
<label class="text-base font-bold text-stone-100" for="mariadbPort">MariaDB Port</label>
<CopyPasswordField
name="mariadbPort"
id="mariadbPort"
value={service.appwrite.mariadbPort}
readonly
disabled
/>
</div> -->
<div class="grid grid-cols-2 items-center px-10">
<label class="text-base font-bold text-stone-100" for="mariadbUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="mariadbUser" name="mariadbUser"
id="mariadbUser" id="mariadbUser"
@@ -81,9 +47,9 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2 ">
<label class="text-base font-bold text-stone-100" for="mariadbPassword">{$t('forms.password')}</label> <label for="mariadbPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="mariadbPassword" id="mariadbPassword"
isPasswordField isPasswordField
@@ -92,9 +58,9 @@
name="mariadbPassword" name="mariadbPassword"
value={service.appwrite.mariadbPassword} value={service.appwrite.mariadbPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mariadbRootUser">Root User</label> <label for="mariadbRootUser">Root User</label>
<CopyPasswordField <CopyPasswordField
name="mariadbRootUser" name="mariadbRootUser"
id="mariadbRootUser" id="mariadbRootUser"
@@ -102,9 +68,9 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2 ">
<label class="text-base font-bold text-stone-100" for="mariadbRootUserPassword">Root Password</label> <label for="mariadbRootUserPassword">Root Password</label>
<CopyPasswordField <CopyPasswordField
id="mariadbRootUserPassword" id="mariadbRootUserPassword"
isPasswordField isPasswordField
@@ -113,9 +79,9 @@
name="mariadbRootUserPassword" name="mariadbRootUserPassword"
value={service.appwrite.mariadbRootUserPassword} value={service.appwrite.mariadbRootUserPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mariadbDatabase">{$t('index.database')}</label> <label for="mariadbDatabase">{$t('index.database')}</label>
<CopyPasswordField <CopyPasswordField
name="mariadbDatabase" name="mariadbDatabase"
id="mariadbDatabase" id="mariadbDatabase"
@@ -123,4 +89,5 @@
readonly readonly
disabled disabled
/> />
</div>
</div> </div>

83
apps/ui/src/routes/services/[id]/_Services/_Fider.svelte
View File

@@ -21,8 +21,9 @@
<div class="title">Fider</div> <div class="title">Fider</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="space-y-2">
<label class="text-base font-bold text-stone-100" for="jwtSecret">JWT Secret</label> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label for="jwtSecret">JWT Secret</label>
<CopyPasswordField <CopyPasswordField
name="jwtSecret" name="jwtSecret"
id="jwtSecret" id="jwtSecret"
@@ -31,10 +32,10 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailNoreply">Noreply Email</label> <label for="emailNoreply">Noreply Email</label>
<input <input
class="w-full" class="w-full"
name="emailNoreply" name="emailNoreply"
@@ -46,12 +47,14 @@
bind:value={service.fider.emailNoreply} bind:value={service.fider.emailNoreply}
placeholder="{$t('forms.eg')}: noreply@yourdomain.com" placeholder="{$t('forms.eg')}: noreply@yourdomain.com"
/> />
</div>
</div> </div>
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">Email</div> <div class="title">Email</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="space-y-2">
<label class="text-base font-bold text-stone-100" for="emailMailgunApiKey">Mailgun API Key</label> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label for="emailMailgunApiKey">Mailgun API Key</label>
<CopyPasswordField <CopyPasswordField
name="emailMailgunApiKey" name="emailMailgunApiKey"
id="emailMailgunApiKey" id="emailMailgunApiKey"
@@ -61,10 +64,10 @@
disabled={readOnly} disabled={readOnly}
placeholder="{$t('forms.eg')}: key-yourkeygoeshere" placeholder="{$t('forms.eg')}: key-yourkeygoeshere"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailMailgunDomain">Mailgun Domain</label> <label for="emailMailgunDomain">Mailgun Domain</label>
<input <input
class="w-full" class="w-full"
name="emailMailgunDomain" name="emailMailgunDomain"
@@ -74,9 +77,9 @@
bind:value={service.fider.emailMailgunDomain} bind:value={service.fider.emailMailgunDomain}
placeholder="{$t('forms.eg')}: yourdomain.com" placeholder="{$t('forms.eg')}: yourdomain.com"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailMailgunRegion">Mailgun Region</label> <label for="emailMailgunRegion">Mailgun Region</label>
<div class="custom-select-wrapper"> <div class="custom-select-wrapper">
<Select <Select
id="baseBuildImages" id="baseBuildImages"
@@ -87,13 +90,13 @@
isClearable={false} isClearable={false}
/> />
</div> </div>
</div> </div>
<div class="flex space-x-1 py-5 lg:px-10 font-bold"> <div class="flex space-x-1 py-5 lg:px-10 px-2 font-bold">
<div class="text-lg">Or</div> <div class="text-lg">Or</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailSmtpHost">SMTP Host</label> <label for="emailSmtpHost">SMTP Host</label>
<input <input
class="w-full" class="w-full"
name="emailSmtpHost" name="emailSmtpHost"
@@ -103,9 +106,9 @@
bind:value={service.fider.emailSmtpHost} bind:value={service.fider.emailSmtpHost}
placeholder="{$t('forms.eg')}: smtp.yourdomain.com" placeholder="{$t('forms.eg')}: smtp.yourdomain.com"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailSmtpPort">SMTP Port</label> <label for="emailSmtpPort">SMTP Port</label>
<input <input
class="w-full" class="w-full"
name="emailSmtpPort" name="emailSmtpPort"
@@ -115,9 +118,9 @@
bind:value={service.fider.emailSmtpPort} bind:value={service.fider.emailSmtpPort}
placeholder="{$t('forms.eg')}: 587" placeholder="{$t('forms.eg')}: 587"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailSmtpUser">SMTP User</label> <label for="emailSmtpUser">SMTP User</label>
<input <input
class="w-full" class="w-full"
name="emailSmtpUser" name="emailSmtpUser"
@@ -127,9 +130,9 @@
bind:value={service.fider.emailSmtpUser} bind:value={service.fider.emailSmtpUser}
placeholder="{$t('forms.eg')}: user@yourdomain.com" placeholder="{$t('forms.eg')}: user@yourdomain.com"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailSmtpPassword">SMTP Password</label> <label for="emailSmtpPassword">SMTP Password</label>
<CopyPasswordField <CopyPasswordField
name="emailSmtpPassword" name="emailSmtpPassword"
id="emailSmtpPassword" id="emailSmtpPassword"
@@ -139,9 +142,9 @@
disabled={readOnly} disabled={readOnly}
placeholder="{$t('forms.eg')}: s0m3p4ssw0rd" placeholder="{$t('forms.eg')}: s0m3p4ssw0rd"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailSmtpEnableStartTls">SMTP Start TLS</label> <label for="emailSmtpEnableStartTls">SMTP Start TLS</label>
<input <input
class="w-full" class="w-full"
name="emailSmtpEnableStartTls" name="emailSmtpEnableStartTls"
@@ -151,13 +154,14 @@
bind:value={service.fider.emailSmtpEnableStartTls} bind:value={service.fider.emailSmtpEnableStartTls}
placeholder="{$t('forms.eg')}: true" placeholder="{$t('forms.eg')}: true"
/> />
</div>
</div> </div>
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">PostgreSQL</div> <div class="title">PostgreSQL</div>
</div> </div>
<div class="space-y-2">
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlUser">{$t('forms.username')}</label> <label for="postgresqlUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlUser" name="postgresqlUser"
id="postgresqlUser" id="postgresqlUser"
@@ -165,9 +169,9 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlPassword">{$t('forms.password')}</label> <label for="postgresqlPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="postgresqlPassword" id="postgresqlPassword"
isPasswordField isPasswordField
@@ -176,9 +180,9 @@
name="postgresqlPassword" name="postgresqlPassword"
value={service.fider.postgresqlPassword} value={service.fider.postgresqlPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlDatabase">{$t('index.database')}</label> <label for="postgresqlDatabase">{$t('index.database')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlDatabase" name="postgresqlDatabase"
id="postgresqlDatabase" id="postgresqlDatabase"
@@ -186,4 +190,5 @@
readonly readonly
disabled disabled
/> />
</div>
</div> </div>

34
apps/ui/src/routes/services/[id]/_Services/_Ghost.svelte
View File

@@ -8,11 +8,12 @@
<div class="flex space-x-1 py-5"> <div class="flex space-x-1 py-5">
<div class="title"> <div class="title">
Ghost <Explainer explanation="You can change these values in the Ghost admin panel." /> Ghost <Explainer explanation="You can change these values in the <span class='text-settings'>Ghost admin panel<span>." />
</div> </div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="space-y-2">
<label class="text-base font-bold text-stone-100" for="email">{$t('forms.default_email_address')}</label> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label for="email">{$t('forms.default_email_address')}</label>
<input <input
class="w-full" class="w-full"
name="email" name="email"
@@ -24,8 +25,8 @@
required required
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="defaultPassword">{$t('forms.default_password')}</label> <label for="defaultPassword">{$t('forms.default_password')}</label>
<CopyPasswordField <CopyPasswordField
id="defaultPassword" id="defaultPassword"
isPasswordField isPasswordField
@@ -35,11 +36,13 @@
value={service.ghost.defaultPassword} value={service.ghost.defaultPassword}
/> />
</div> </div>
</div>
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MariaDB</div> <div class="title">MariaDB</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="space-y-2">
<label class="text-base font-bold text-stone-100" for="mariadbUser">{$t('forms.username')}</label> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label for="mariadbUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="mariadbUser" name="mariadbUser"
id="mariadbUser" id="mariadbUser"
@@ -48,8 +51,8 @@
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mariadbPassword">{$t('forms.password')}</label> <label for="mariadbPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="mariadbPassword" id="mariadbPassword"
isPasswordField isPasswordField
@@ -59,8 +62,8 @@
value={service.ghost.mariadbPassword} value={service.ghost.mariadbPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mariadbDatabase">{$t('index.database')}</label> <label for="mariadbDatabase">{$t('index.database')}</label>
<input <input
class="w-full" class="w-full"
name="mariadbDatabase" name="mariadbDatabase"
@@ -72,8 +75,8 @@
placeholder="{$t('forms.eg')}: ghost_db" placeholder="{$t('forms.eg')}: ghost_db"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mariadbRootUser">{$t('forms.root_db_user')}</label> <label for="mariadbRootUser">{$t('forms.root_db_user')}</label>
<CopyPasswordField <CopyPasswordField
id="mariadbRootUser" id="mariadbRootUser"
readonly readonly
@@ -82,8 +85,8 @@
value={service.ghost.mariadbRootUser} value={service.ghost.mariadbRootUser}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mariadbRootUserPassword">{$t('forms.root_db_password')}</label> <label for="mariadbRootUserPassword">{$t('forms.root_db_password')}</label>
<CopyPasswordField <CopyPasswordField
id="mariadbRootUserPassword" id="mariadbRootUserPassword"
isPasswordField isPasswordField
@@ -93,3 +96,4 @@
value={service.ghost.mariadbRootUserPassword} value={service.ghost.mariadbRootUserPassword}
/> />
</div> </div>
</div>

100
apps/ui/src/routes/services/[id]/_Services/_GlitchTip.svelte
View File

@@ -53,7 +53,7 @@
<div class="title">GlitchTip</div> <div class="title">GlitchTip</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<Setting <Setting
id="enableOpenUserRegistration" id="enableOpenUserRegistration"
bind:setting={service.glitchTip.enableOpenUserRegistration} bind:setting={service.glitchTip.enableOpenUserRegistration}
@@ -74,7 +74,8 @@
<div class="flex space-x-1 py-2 font-bold"> <div class="flex space-x-1 py-2 font-bold">
<div class="subtitle">Email settings</div> <div class="subtitle">Email settings</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="space-y-2">
<div class="grid grid-cols-2 items-center lg:px-10 px-2">
<Setting <Setting
id="emailSmtpUseTls" id="emailSmtpUseTls"
bind:setting={service.glitchTip.emailSmtpUseTls} bind:setting={service.glitchTip.emailSmtpUseTls}
@@ -84,9 +85,9 @@
title="Use TLS for SMTP" title="Use TLS for SMTP"
description={''} description={''}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<Setting <Setting
id="emailSmtpUseSsl" id="emailSmtpUseSsl"
bind:setting={service.glitchTip.emailSmtpUseSsl} bind:setting={service.glitchTip.emailSmtpUseSsl}
@@ -96,87 +97,87 @@
title="Use SSL for SMTP" title="Use SSL for SMTP"
description={''} description={''}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="defaultEmailFrom">Default Email From</label> <label for="defaultEmailFrom">Default Email From</label>
<CopyPasswordField <CopyPasswordField
required required
name="defaultEmailFrom" name="defaultEmailFrom"
id="defaultEmailFrom" id="defaultEmailFrom"
bind:value={service.glitchTip.defaultEmailFrom} bind:value={service.glitchTip.defaultEmailFrom}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailSmtpHost">SMTP Host</label> <label for="emailSmtpHost">SMTP Host</label>
<CopyPasswordField <CopyPasswordField
name="emailSmtpHost" name="emailSmtpHost"
id="emailSmtpHost" id="emailSmtpHost"
bind:value={service.glitchTip.emailSmtpHost} bind:value={service.glitchTip.emailSmtpHost}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailSmtpPort">SMTP Port</label> <label for="emailSmtpPort">SMTP Port</label>
<CopyPasswordField <CopyPasswordField
name="emailSmtpPort" name="emailSmtpPort"
id="emailSmtpPort" id="emailSmtpPort"
bind:value={service.glitchTip.emailSmtpPort} bind:value={service.glitchTip.emailSmtpPort}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailSmtpUser">SMTP User</label> <label for="emailSmtpUser">SMTP User</label>
<CopyPasswordField <CopyPasswordField
name="emailSmtpUser" name="emailSmtpUser"
id="emailSmtpUser" id="emailSmtpUser"
bind:value={service.glitchTip.emailSmtpUser} bind:value={service.glitchTip.emailSmtpUser}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailSmtpPassword">SMTP Password</label> <label for="emailSmtpPassword">SMTP Password</label>
<CopyPasswordField <CopyPasswordField
name="emailSmtpPassword" name="emailSmtpPassword"
id="emailSmtpPassword" id="emailSmtpPassword"
bind:value={service.glitchTip.emailSmtpPassword} bind:value={service.glitchTip.emailSmtpPassword}
isPasswordField isPasswordField
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="emailBackend">Email Backend</label> <label for="emailBackend">Email Backend</label>
<CopyPasswordField <CopyPasswordField
name="emailBackend" name="emailBackend"
id="emailBackend" id="emailBackend"
bind:value={service.glitchTip.emailBackend} bind:value={service.glitchTip.emailBackend}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mailgunApiKey">Mailgun API Key</label> <label for="mailgunApiKey">Mailgun API Key</label>
<CopyPasswordField <CopyPasswordField
name="mailgunApiKey" name="mailgunApiKey"
id="mailgunApiKey" id="mailgunApiKey"
bind:value={service.glitchTip.mailgunApiKey} bind:value={service.glitchTip.mailgunApiKey}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="sendgridApiKey">SendGrid API Key</label> <label for="sendgridApiKey">SendGrid API Key</label>
<CopyPasswordField <CopyPasswordField
name="sendgridApiKey" name="sendgridApiKey"
id="sendgridApiKey" id="sendgridApiKey"
bind:value={service.glitchTip.sendgridApiKey} bind:value={service.glitchTip.sendgridApiKey}
/> />
</div> </div>
<div class="flex space-x-1 py-2 font-bold"> <div class="flex space-x-1 py-2 font-bold">
<div class="subtitle">Default User & Superuser</div> <div class="subtitle">Default User & Superuser</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="defaultEmail">{$t('forms.email')}</label> <label for="defaultEmail">{$t('forms.email')}</label>
<CopyPasswordField <CopyPasswordField
name="defaultEmail" name="defaultEmail"
id="defaultEmail" id="defaultEmail"
@@ -184,9 +185,9 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="defaultUsername">{$t('forms.username')}</label> <label for="defaultUsername">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="defaultUsername" name="defaultUsername"
id="defaultUsername" id="defaultUsername"
@@ -194,9 +195,9 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="defaultPassword">{$t('forms.password')}</label> <label for="defaultPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
name="defaultPassword" name="defaultPassword"
id="defaultPassword" id="defaultPassword"
@@ -205,14 +206,14 @@
disabled disabled
isPasswordField isPasswordField
/> />
</div>
</div> </div>
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">PostgreSQL</div> <div class="title">PostgreSQL</div>
</div> </div>
<div class="space-y-2">
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlUser">{$t('forms.username')}</label> <label for="postgresqlUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlUser" name="postgresqlUser"
id="postgresqlUser" id="postgresqlUser"
@@ -220,9 +221,9 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlPassword">{$t('forms.password')}</label> <label for="postgresqlPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="postgresqlPassword" id="postgresqlPassword"
isPasswordField isPasswordField
@@ -231,9 +232,9 @@
name="postgresqlPassword" name="postgresqlPassword"
bind:value={service.glitchTip.postgresqlPassword} bind:value={service.glitchTip.postgresqlPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlDatabase">{$t('index.database')}</label> <label for="postgresqlDatabase">{$t('index.database')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlDatabase" name="postgresqlDatabase"
id="postgresqlDatabase" id="postgresqlDatabase"
@@ -241,4 +242,5 @@
readonly readonly
disabled disabled
/> />
</div>
</div> </div>

22
apps/ui/src/routes/services/[id]/_Services/_Hasura.svelte
View File

@@ -8,8 +8,8 @@
<div class="title">Hasura</div> <div class="title">Hasura</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="graphQLAdminPassword">GraphQL Admin Password</label> <label for="graphQLAdminPassword">GraphQL Admin Password</label>
<CopyPasswordField <CopyPasswordField
name="graphQLAdminPassword" name="graphQLAdminPassword"
id="graphQLAdminPassword" id="graphQLAdminPassword"
@@ -24,8 +24,9 @@
<div class="title">PostgreSQL</div> <div class="title">PostgreSQL</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="space-y-2">
<label class="text-base font-bold text-stone-100" for="postgresqlUser">{$t('forms.username')}</label> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label for="postgresqlUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlUser" name="postgresqlUser"
id="postgresqlUser" id="postgresqlUser"
@@ -33,9 +34,9 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlPassword">{$t('forms.password')}</label> <label for="postgresqlPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="postgresqlPassword" id="postgresqlPassword"
isPasswordField isPasswordField
@@ -44,9 +45,9 @@
name="postgresqlPassword" name="postgresqlPassword"
value={service.hasura.postgresqlPassword} value={service.hasura.postgresqlPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlDatabase">{$t('index.database')}</label> <label for="postgresqlDatabase">{$t('index.database')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlDatabase" name="postgresqlDatabase"
id="postgresqlDatabase" id="postgresqlDatabase"
@@ -54,4 +55,5 @@
readonly readonly
disabled disabled
/> />
</div>
</div> </div>

4
apps/ui/src/routes/services/[id]/_Services/_MeiliSearch.svelte
View File

@@ -7,8 +7,8 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MeiliSearch</div> <div class="title">MeiliSearch</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="masterKey">{$t('forms.admin_api_key')}</label> <label for="masterKey">{$t('forms.admin_api_key')}</label>
<CopyPasswordField <CopyPasswordField
id="masterKey" id="masterKey"
isPasswordField isPasswordField

23
apps/ui/src/routes/services/[id]/_Services/_MinIO.svelte
View File

@@ -8,8 +8,9 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MinIO</div> <div class="title">MinIO</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="space-y-2">
<label class="text-base font-bold text-stone-100" for="rootUser">{$t('forms.root_user')}</label> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label for="rootUser">{$t('forms.root_user')}</label>
<input <input
class="w-full" class="w-full"
name="rootUser" name="rootUser"
@@ -19,9 +20,9 @@
disabled disabled
readonly readonly
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="rootUserPassword">{$t('forms.roots_password')}</label> <label for="rootUserPassword">{$t('forms.roots_password')}</label>
<CopyPasswordField <CopyPasswordField
id="rootUserPassword" id="rootUserPassword"
isPasswordField isPasswordField
@@ -30,11 +31,12 @@
name="rootUserPassword" name="rootUserPassword"
value={service.minio.rootUserPassword} value={service.minio.rootUserPassword}
/> />
</div> </div>
{#if !service.minio.apiFqdn} {#if !service.minio.apiFqdn}
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="publicPort">{$t('forms.api_port')}</label> <label for="publicPort">{$t('forms.api_port')}</label>
<input <input
class="w-full"
name="publicPort" name="publicPort"
id="publicPort" id="publicPort"
value={service.minio.publicPort} value={service.minio.publicPort}
@@ -43,4 +45,5 @@
placeholder={$t('forms.generated_automatically_after_start')} placeholder={$t('forms.generated_automatically_after_start')}
/> />
</div> </div>
{/if} {/if}
</div>

54
apps/ui/src/routes/services/[id]/_Services/_PlausibleAnalytics.svelte
View File

@@ -10,8 +10,9 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">Plausible Analytics</div> <div class="title">Plausible Analytics</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="space-y-2">
<label class="text-base font-bold text-stone-100" for="scriptName" <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label for="scriptName"
>Script Name <Explainer >Script Name <Explainer
explanation="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers." explanation="Useful if you would like to rename the collector script to prevent it blocked by AdBlockers."
/></label /></label
@@ -21,45 +22,39 @@
name="scriptName" name="scriptName"
id="scriptName" id="scriptName"
readonly={!$appSession.isAdmin && !$status.service.isRunning} readonly={!$appSession.isAdmin && !$status.service.isRunning}
disabled={!$appSession.isAdmin || disabled={!$appSession.isAdmin || $status.service.isRunning || $status.service.initialLoading}
$status.service.isRunning ||
$status.service.initialLoading}
placeholder="plausible.js" placeholder="plausible.js"
bind:value={service.plausibleAnalytics.scriptName} bind:value={service.plausibleAnalytics.scriptName}
required required
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="email">{$t('forms.email')}</label> <label for="email">{$t('forms.email')}</label>
<input <input
class="w-full" class="w-full"
name="email" name="email"
id="email" id="email"
disabled={!$appSession.isAdmin || disabled={!$appSession.isAdmin || $status.service.isRunning || $status.service.initialLoading}
$status.service.isRunning ||
$status.service.initialLoading}
readonly={readOnly} readonly={readOnly}
placeholder={$t('forms.email')} placeholder={$t('forms.email')}
bind:value={service.plausibleAnalytics.email} bind:value={service.plausibleAnalytics.email}
required required
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="username">{$t('forms.username')}</label> <label for="username">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="username" name="username"
id="username" id="username"
disabled={!$appSession.isAdmin || disabled={!$appSession.isAdmin || $status.service.isRunning || $status.service.initialLoading}
$status.service.isRunning ||
$status.service.initialLoading}
readonly={readOnly} readonly={readOnly}
placeholder={$t('forms.username')} placeholder={$t('forms.username')}
bind:value={service.plausibleAnalytics.username} bind:value={service.plausibleAnalytics.username}
required required
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="password">{$t('forms.password')}</label> <label for="password">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="password" id="password"
isPasswordField isPasswordField
@@ -68,12 +63,14 @@
name="password" name="password"
value={service.plausibleAnalytics.password} value={service.plausibleAnalytics.password}
/> />
</div>
</div> </div>
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">PostgreSQL</div> <div class="title">PostgreSQL</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="space-y-2">
<label class="text-base font-bold text-stone-100" for="postgresqlUser">{$t('forms.username')}</label> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label for="postgresqlUser">{$t('forms.username')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlUser" name="postgresqlUser"
id="postgresqlUser" id="postgresqlUser"
@@ -81,9 +78,9 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlPassword">{$t('forms.password')}</label> <label for="postgresqlPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="postgresqlPassword" id="postgresqlPassword"
isPasswordField isPasswordField
@@ -92,9 +89,9 @@
name="postgresqlPassword" name="postgresqlPassword"
value={service.plausibleAnalytics.postgresqlPassword} value={service.plausibleAnalytics.postgresqlPassword}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlDatabase">{$t('index.database')}</label> <label for="postgresqlDatabase">{$t('index.database')}</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlDatabase" name="postgresqlDatabase"
id="postgresqlDatabase" id="postgresqlDatabase"
@@ -102,4 +99,5 @@
readonly readonly
disabled disabled
/> />
</div>
</div> </div>

8
apps/ui/src/routes/services/[id]/_Services/_Searxng.svelte
View File

@@ -8,8 +8,8 @@
<div class="title">SearXNG</div> <div class="title">SearXNG</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="secretKey">Secret Key</label> <label for="secretKey">Secret Key</label>
<CopyPasswordField <CopyPasswordField
name="secretKey" name="secretKey"
id="secretKey" id="secretKey"
@@ -23,8 +23,8 @@
<div class="title">Redis</div> <div class="title">Redis</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="redisPassword">{$t('forms.password')}</label> <label for="redisPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
name="redisPassword" name="redisPassword"
id="redisPassword" id="redisPassword"

72
apps/ui/src/routes/services/[id]/_Services/_Services.svelte
View File

@@ -178,10 +178,10 @@
}); });
</script> </script>
<div class="mx-auto max-w-4xl px-6 pb-12"> <div class="mx-auto max-w-6xl px-6 pb-12">
<form on:submit|preventDefault={handleSubmit} class="py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex flex-col lg:flex-row justify-between lg:space-x-1 space-y-3 pb-5 items-center"> <div class="flex space-x-1 pb-5 items-center">
<div class="title">{$t('general')}</div> <h1 class="title">{$t('general')}</h1>
<div class="flex flex-row space-y-3 items-center"> <div class="flex flex-row space-y-3 items-center">
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button <button
@@ -228,18 +228,13 @@
</div> </div>
{/if} {/if}
<div class="grid gap-4 grid-cols-2 grid-rows-1 lg:px-10"> <div class="grid gap-4 grid-cols-1 grid-rows-1 lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="name" >{$t('forms.name')}</label> <div class="mt-2 grid grid-cols-2 items-center">
<div> <label for="name">{$t('forms.name')}</label>
<input <input name="name" id="name" class="w-full" bind:value={service.name} required />
readonly={!$appSession.isAdmin}
name="name"
id="name"
bind:value={service.name}
required
/>
</div> </div>
<label class="text-base font-bold text-stone-100" for="version">Version / Tag</label> <div class="grid grid-cols-2 items-center">
<label for="version">Version / Tag</label>
<a <a
href={$appSession.isAdmin && !$status.service.isRunning && !$status.service.initialLoading href={$appSession.isAdmin && !$status.service.isRunning && !$status.service.initialLoading
? `/services/${id}/configuration/version?from=/services/${id}` ? `/services/${id}/configuration/version?from=/services/${id}`
@@ -247,6 +242,7 @@
class="no-underline" class="no-underline"
> >
<input <input
class="w-full"
value={service.version} value={service.version}
id="service" id="service"
readonly readonly
@@ -254,9 +250,9 @@
class:cursor-pointer={!$status.service.isRunning} class:cursor-pointer={!$status.service.isRunning}
/></a /></a
> >
<label class="text-base font-bold text-stone-100" for="destination" </div>
>{$t('application.destination')}</label <div class="grid grid-cols-2 items-center">
> <label for="destination">{$t('application.destination')}</label>
<div> <div>
{#if service.destinationDockerId} {#if service.destinationDockerId}
<div class="no-underline"> <div class="no-underline">
@@ -264,14 +260,16 @@
value={service.destinationDocker.name} value={service.destinationDocker.name}
id="destination" id="destination"
disabled disabled
class="bg-transparent " class="bg-transparent w-full"
/> />
</div> </div>
{/if} {/if}
</div> </div>
</div>
{#if service.type === 'minio'} {#if service.type === 'minio'}
<label class="text-base font-bold text-stone-100" for="fqdn">Console URL</label> <div class="grid grid-cols-2 items-center">
<label for="fqdn">Console URL</label>
<CopyPasswordField <CopyPasswordField
placeholder="eg: https://console.min.io" placeholder="eg: https://console.min.io"
@@ -283,7 +281,9 @@
bind:value={service.fqdn} bind:value={service.fqdn}
required required
/> />
<label class="text-base font-bold text-stone-100" for="apiFqdn" </div>
<div class="grid grid-cols-2 items-center">
<label for="apiFqdn"
>API URL <Explainer explanation={$t('application.https_explainer')} /></label >API URL <Explainer explanation={$t('application.https_explainer')} /></label
> >
<CopyPasswordField <CopyPasswordField
@@ -296,8 +296,10 @@
bind:value={service.minio.apiFqdn} bind:value={service.minio.apiFqdn}
required required
/> />
</div>
{:else} {:else}
<label class="text-base font-bold text-stone-100" for="fqdn" <div class="grid grid-cols-2 items-center">
<label for="fqdn"
>{$t('application.url_fqdn')} >{$t('application.url_fqdn')}
<Explainer explanation={$t('application.https_explainer')} /> <Explainer explanation={$t('application.https_explainer')} />
</label> </label>
@@ -313,6 +315,7 @@
bind:value={service.fqdn} bind:value={service.fqdn}
required required
/> />
</div>
{/if} {/if}
</div> </div>
{#if forceSave} {#if forceSave}
@@ -348,22 +351,15 @@
</div> </div>
{/if} {/if}
<div class="grid gap-4 grid-cols-2 grid-rows-1 lg:px-10"> <div class="grid grid-flow-row gap-2 lg:px-10 px-2 pt-4">
<Setting <div class="grid grid-cols-2 items-center">
id="dualCerts" <label for="exposePort"
disabled={$status.service.isRunning}
dataTooltip={$t('forms.must_be_stopped_to_modify')}
bind:setting={dualCerts}
title={$t('application.ssl_www_and_non_www')}
description={$t('services.generate_www_non_www_ssl')}
on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
/>
<label class="text-base font-bold text-stone-100" for="exposePort"
>Exposed Port <Explainer >Exposed Port <Explainer
explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'} explanation={'You can expose your application to a port on the host system.<br><br>Useful if you would like to use your own reverse proxy or tunnel and also in development mode. Otherwise leave empty.'}
/></label /></label
> >
<input <input
class="w-full"
readonly={!$appSession.isAdmin && !$status.service.isRunning} readonly={!$appSession.isAdmin && !$status.service.isRunning}
disabled={!$appSession.isAdmin || disabled={!$appSession.isAdmin ||
$status.service.isRunning || $status.service.isRunning ||
@@ -374,6 +370,18 @@
placeholder="12345" placeholder="12345"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center">
<Setting
id="dualCerts"
disabled={$status.service.isRunning}
dataTooltip={$t('forms.must_be_stopped_to_modify')}
bind:setting={dualCerts}
title={$t('application.ssl_www_and_non_www')}
description={$t('services.generate_www_non_www_ssl')}
on:click={() => !$status.service.isRunning && changeSettings('dualCerts')}
/>
</div>
</div>
{#if service.type === 'plausibleanalytics'} {#if service.type === 'plausibleanalytics'}
<PlausibleAnalytics bind:service {readOnly} /> <PlausibleAnalytics bind:service {readOnly} />
{:else if service.type === 'minio'} {:else if service.type === 'minio'}

22
apps/ui/src/routes/services/[id]/_Services/_Umami.svelte
View File

@@ -7,12 +7,21 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">Umami</div> <div class="title">Umami</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="space-y-2">
<label class="text-base font-bold text-stone-100" for="adminUser">Admin User</label> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<input name="adminUser" id="adminUser" placeholder="admin" value="admin" disabled readonly /> <label for="adminUser">Admin User</label>
</div> <input
<div class="grid grid-cols-2 items-center lg:px-10"> class="w-full"
<label class="text-base font-bold text-stone-100" for="umamiAdminPassword" name="adminUser"
id="adminUser"
placeholder="admin"
value="admin"
disabled
readonly
/>
</div>
<div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label for="umamiAdminPassword"
>Initial Admin Password <Explainer >Initial Admin Password <Explainer
explanation="It could be changed in Umami. <br>This is just the password set initially after the first start." explanation="It could be changed in Umami. <br>This is just the password set initially after the first start."
/></label /></label
@@ -26,4 +35,5 @@
disabled disabled
readonly readonly
/> />
</div>
</div> </div>

4
apps/ui/src/routes/services/[id]/_Services/_VSCodeServer.svelte
View File

@@ -8,8 +8,8 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">VSCode Server</div> <div class="title">VSCode Server</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="password">{$t('forms.password')}</label> <label for="password">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="password" id="password"
isPasswordField isPasswordField

29
apps/ui/src/routes/services/[id]/_Services/_Weblate.svelte
View File

@@ -7,8 +7,8 @@
<div class="title">Weblate</div> <div class="title">Weblate</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="adminPassword">Admin password</label> <label for="adminPassword">Admin password</label>
<CopyPasswordField <CopyPasswordField
name="adminPassword" name="adminPassword"
id="adminPassword" id="adminPassword"
@@ -22,9 +22,9 @@
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">PostgreSQL</div> <div class="title">PostgreSQL</div>
</div> </div>
<div class="space-y-2">
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlHost">PostgreSQL Host</label> <label for="postgresqlHost">PostgreSQL Host</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlHost" name="postgresqlHost"
id="postgresqlHost" id="postgresqlHost"
@@ -32,9 +32,9 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlPort">PostgreSQL Port</label> <label for="postgresqlPort">PostgreSQL Port</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlPort" name="postgresqlPort"
id="postgresqlPort" id="postgresqlPort"
@@ -42,9 +42,9 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlUser">PostgreSQL User</label> <label for="postgresqlUser">PostgreSQL User</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlUser" name="postgresqlUser"
id="postgresqlUser" id="postgresqlUser"
@@ -52,9 +52,9 @@
readonly readonly
disabled disabled
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="postgresqlPassword">PostgreSQL Password</label> <label for="postgresqlPassword">PostgreSQL Password</label>
<CopyPasswordField <CopyPasswordField
name="postgresqlPassword" name="postgresqlPassword"
id="postgresqlPassword" id="postgresqlPassword"
@@ -63,4 +63,5 @@
readonly readonly
disabled disabled
/> />
</div>
</div> </div>

72
apps/ui/src/routes/services/[id]/_Services/_Wordpress.svelte
View File

@@ -21,9 +21,7 @@
function generateUrl(publicPort: any) { function generateUrl(publicPort: any) {
return browser return browser
? `sftp://${ ? `sftp://${settings?.fqdn ? getDomain(settings.fqdn) : ipv4 || ipv6}:${publicPort}`
settings?.fqdn ? getDomain(settings.fqdn) : ipv4 || ipv6
}:${publicPort}`
: 'Loading...'; : 'Loading...';
} }
async function changeSettings(name: any) { async function changeSettings(name: any) {
@@ -72,9 +70,10 @@
<div class="title">Wordpress</div> <div class="title">Wordpress</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="extraConfig">{$t('forms.extra_config')}</label> <label for="extraConfig">{$t('forms.extra_config')}</label>
<textarea <textarea
class="w-full"
bind:value={service.wordpress.extraConfig} bind:value={service.wordpress.extraConfig}
disabled={$status.service.isRunning || $status.service.initialLoading} disabled={$status.service.isRunning || $status.service.initialLoading}
readonly={$status.service.isRunning} readonly={$status.service.isRunning}
@@ -91,7 +90,7 @@ define('SUBDOMAIN_INSTALL', false);`
: 'N/A'} : 'N/A'}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<Setting <Setting
id="ftpEnabled" id="ftpEnabled"
bind:setting={service.wordpress.ftpEnabled} bind:setting={service.wordpress.ftpEnabled}
@@ -103,16 +102,16 @@ define('SUBDOMAIN_INSTALL', false);`
/> />
</div> </div>
{#if service.wordpress.ftpEnabled} {#if service.wordpress.ftpEnabled}
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="ftpUrl">sFTP Connection URI</label> <label for="ftpUrl">sFTP Connection URI</label>
<CopyPasswordField id="ftpUrl" readonly disabled name="ftpUrl" value={ftpUrl} /> <CopyPasswordField id="ftpUrl" readonly disabled name="ftpUrl" value={ftpUrl} />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="ftpUser">User</label> <label for="ftpUser">User</label>
<CopyPasswordField id="ftpUser" readonly disabled name="ftpUser" value={ftpUser} /> <CopyPasswordField id="ftpUser" readonly disabled name="ftpUser" value={ftpUser} />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="ftpPassword">Password</label> <label for="ftpPassword">Password</label>
<CopyPasswordField <CopyPasswordField
id="ftpPassword" id="ftpPassword"
isPasswordField isPasswordField
@@ -126,7 +125,8 @@ define('SUBDOMAIN_INSTALL', false);`
<div class="flex space-x-1 py-5 font-bold"> <div class="flex space-x-1 py-5 font-bold">
<div class="title">MySQL</div> <div class="title">MySQL</div>
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="space-y-2">
<div class="grid grid-cols-2 items-center lg:px-10 px-2">
<Setting <Setting
id="ownMysql" id="ownMysql"
dataTooltip={$t('forms.must_be_stopped_to_modify')} dataTooltip={$t('forms.must_be_stopped_to_modify')}
@@ -136,11 +136,12 @@ define('SUBDOMAIN_INSTALL', false);`
title="Use your own MySQL server" title="Use your own MySQL server"
description="Enables the use of your own MySQL server. If you don't have one, you can use the one provided by Coolify." description="Enables the use of your own MySQL server. If you don't have one, you can use the one provided by Coolify."
/> />
</div> </div>
{#if service.wordpress.ownMysql} {#if service.wordpress.ownMysql}
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mysqlHost">Host</label> <label for="mysqlHost">Host</label>
<input <input
class="w-full"
name="mysqlHost" name="mysqlHost"
id="mysqlHost" id="mysqlHost"
required required
@@ -150,9 +151,10 @@ define('SUBDOMAIN_INSTALL', false);`
placeholder="{$t('forms.eg')}: db.coolify.io" placeholder="{$t('forms.eg')}: db.coolify.io"
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mysqlPort">Port</label> <label for="mysqlPort">Port</label>
<input <input
class="w-full"
name="mysqlPort" name="mysqlPort"
id="mysqlPort" id="mysqlPort"
required required
@@ -162,9 +164,9 @@ define('SUBDOMAIN_INSTALL', false);`
placeholder="{$t('forms.eg')}: 3306" placeholder="{$t('forms.eg')}: 3306"
/> />
</div> </div>
{/if} {/if}
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mysqlDatabase">{$t('index.database')}</label> <label for="mysqlDatabase">{$t('index.database')}</label>
<input <input
class="w-full" class="w-full"
name="mysqlDatabase" name="mysqlDatabase"
@@ -175,11 +177,12 @@ define('SUBDOMAIN_INSTALL', false);`
bind:value={service.wordpress.mysqlDatabase} bind:value={service.wordpress.mysqlDatabase}
placeholder="{$t('forms.eg')}: wordpress_db" placeholder="{$t('forms.eg')}: wordpress_db"
/> />
</div> </div>
{#if !service.wordpress.ownMysql} {#if !service.wordpress.ownMysql}
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mysqlRootUser">{$t('forms.root_user')}</label> <label for="mysqlRootUser">{$t('forms.root_user')}</label>
<input <input
class="w-full"
name="mysqlRootUser" name="mysqlRootUser"
id="mysqlRootUser" id="mysqlRootUser"
placeholder="MySQL {$t('forms.root_user')}" placeholder="MySQL {$t('forms.root_user')}"
@@ -188,8 +191,8 @@ define('SUBDOMAIN_INSTALL', false);`
disabled={$status.service.isRunning || !service.wordpress.ownMysql} disabled={$status.service.isRunning || !service.wordpress.ownMysql}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mysqlRootUserPassword">{$t('forms.roots_password')}</label> <label for="mysqlRootUserPassword">{$t('forms.roots_password')}</label>
<CopyPasswordField <CopyPasswordField
id="mysqlRootUserPassword" id="mysqlRootUserPassword"
isPasswordField isPasswordField
@@ -199,9 +202,9 @@ define('SUBDOMAIN_INSTALL', false);`
value={service.wordpress.mysqlRootUserPassword} value={service.wordpress.mysqlRootUserPassword}
/> />
</div> </div>
{/if} {/if}
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mysqlUser">{$t('forms.user')}</label> <label for="mysqlUser">{$t('forms.user')}</label>
<input <input
class="w-full" class="w-full"
name="mysqlUser" name="mysqlUser"
@@ -210,9 +213,9 @@ define('SUBDOMAIN_INSTALL', false);`
readonly={$status.service.isRunning || !service.wordpress.ownMysql} readonly={$status.service.isRunning || !service.wordpress.ownMysql}
disabled={$status.service.isRunning || !service.wordpress.ownMysql} disabled={$status.service.isRunning || !service.wordpress.ownMysql}
/> />
</div> </div>
<div class="grid grid-cols-2 items-center lg:px-10"> <div class="grid grid-cols-2 items-center lg:px-10 px-2">
<label class="text-base font-bold text-stone-100" for="mysqlPassword">{$t('forms.password')}</label> <label for="mysqlPassword">{$t('forms.password')}</label>
<CopyPasswordField <CopyPasswordField
id="mysqlPassword" id="mysqlPassword"
isPasswordField isPasswordField
@@ -221,4 +224,5 @@ define('SUBDOMAIN_INSTALL', false);`
name="mysqlPassword" name="mysqlPassword"
bind:value={service.wordpress.mysqlPassword} bind:value={service.wordpress.mysqlPassword}
/> />
</div>
</div> </div>

46
apps/ui/src/routes/services/[id]/__layout.svelte
View File

@@ -56,7 +56,6 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import DeleteIcon from '$lib/components/DeleteIcon.svelte'; import DeleteIcon from '$lib/components/DeleteIcon.svelte';
import { del, get, post } from '$lib/api'; import { del, get, post } from '$lib/api';
import { goto } from '$app/navigation';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { errorNotification, handlerNotFoundLoad } from '$lib/common'; import { errorNotification, handlerNotFoundLoad } from '$lib/common';
import { import {
@@ -70,6 +69,7 @@
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import Tooltip from '$lib/components/Tooltip.svelte'; import Tooltip from '$lib/components/Tooltip.svelte';
import ServiceLinks from './_ServiceLinks.svelte'; import ServiceLinks from './_ServiceLinks.svelte';
import { goto } from '$app/navigation';
const { id } = $page.params; const { id } = $page.params;
export let service: any; export let service: any;
@@ -86,7 +86,7 @@
if (service.type && $status.service.isRunning) if (service.type && $status.service.isRunning)
await post(`/services/${service.id}/${service.type}/stop`, {}); await post(`/services/${service.id}/${service.type}/stop`, {});
await del(`/services/${service.id}`, { id: service.id }); await del(`/services/${service.id}`, { id: service.id });
return await window.location.assign(`/`); return await goto('/');
} catch (error) { } catch (error) {
return errorNotification(error); return errorNotification(error);
} finally { } finally {
@@ -156,19 +156,31 @@
}); });
</script> </script>
<nav class="header"> <nav class="header lg:flex-row flex-col-reverse">
<div class="hidden items-center space-x-2 p-5 px-6 font-bold lg:flex"> <div class="flex flex-row space-x-2 font-bold pt-10 lg:pt-0">
<div class="flex flex-col"> <div class="flex flex-col items-center justify-center">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block"> <div class="title">
Configuration {#if $page.url.pathname === `/services/${id}`}
Configurations
{:else if $page.url.pathname === `/services/${id}/secrets`}
Secrets
{:else if $page.url.pathname === `/services/${id}/storages`}
Persistent Storages
{:else if $page.url.pathname === `/services/${id}/logs`}
Service Logs
{:else if $page.url.pathname === `/services/${id}/configuration/type`}
Select a Service Type
{:else if $page.url.pathname === `/services/${id}/configuration/version`}
Select a Service Version
{:else if $page.url.pathname === `/services/${id}/configuration/destination`}
Select a Destination
{/if}
</div> </div>
<span class="text-xs">{service.name}</span>
</div> </div>
<ServiceLinks {service} /> <ServiceLinks {service} />
</div> </div>
<div <div class="lg:block hidden flex-1" />
class="flex flex-row flex-wrap space-x-4 space-y-3 justify-center lg:justify-start py-2 lg:py-0" <div class="flex flex-row flex-wrap space-x-3 justify-center lg:justify-start lg:py-0">
>
{#if $location} {#if $location}
<a <a
id="open" id="open"
@@ -192,7 +204,7 @@
</svg></a </svg></a
> >
<Tooltip triggeredBy="#open">Open</Tooltip> <Tooltip triggeredBy="#open">Open</Tooltip>
<div class="border border-stone-700 h-8" /> <div class="hidden lg:block border border-coolgray-500 h-8" />
{/if} {/if}
{#if $status.service.isExited} {#if $status.service.isExited}
<a <a
@@ -291,8 +303,9 @@
</button> </button>
<Tooltip triggeredBy="#start">Start</Tooltip> <Tooltip triggeredBy="#start">Start</Tooltip>
{/if} {/if}
<div class="border border-stone-700 h-8" />
{#if service.type && service.destinationDockerId && service.version} {#if service.type && service.destinationDockerId && service.version}
<div class="hidden lg:block border border-coolgray-500 h-8" />
<a <a
href="/services/{id}" href="/services/{id}"
sveltekit:prefetch sveltekit:prefetch
@@ -386,8 +399,8 @@
</svg> </svg>
</button></a </button></a
> >
<Tooltip triggeredBy="#persistentstorage">Persistent Storage</Tooltip> <Tooltip triggeredBy="#persistentstorage">Persistent Storages</Tooltip>
<div class="border border-stone-700 h-8" /> <div class="hidden lg:block border border-coolgray-500 h-8" />
<a <a
href={$isDeploymentEnabled && $status.service.isRunning ? `/services/${id}/logs` : null} href={$isDeploymentEnabled && $status.service.isRunning ? `/services/${id}/logs` : null}
sveltekit:prefetch sveltekit:prefetch
@@ -421,6 +434,7 @@
> >
<Tooltip triggeredBy="#logs">Logs</Tooltip> <Tooltip triggeredBy="#logs">Logs</Tooltip>
{/if} {/if}
<div class="hidden lg:block border border-coolgray-500 h-8" />
<button <button
id="delete" id="delete"
on:click={deleteService} on:click={deleteService}
@@ -429,7 +443,7 @@
class:hover:text-red-500={$appSession.isAdmin} class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent text-sm"><DeleteIcon /></button class="icons bg-transparent text-sm"><DeleteIcon /></button
> >
<Tooltip triggeredBy="#delete">Delete</Tooltip> <Tooltip triggeredBy="#delete" placement="left">Delete</Tooltip>
</div> </div>
</nav> </nav>
<slot /> <slot />

5
apps/ui/src/routes/services/[id]/configuration/destination.svelte
View File

@@ -52,11 +52,6 @@
} }
</script> </script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">
{$t('application.configuration.configure_destination')}
</div>
</div>
<div class="flex justify-center"> <div class="flex justify-center">
{#if !destinations || destinations.length === 0} {#if !destinations || destinations.length === 0}
<div class="flex-col"> <div class="flex-col">

4
apps/ui/src/routes/services/[id]/configuration/type.svelte
View File

@@ -47,10 +47,6 @@
} }
</script> </script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('forms.select_a_service')}</div>
</div>
<div class="flex flex-wrap justify-center"> <div class="flex flex-wrap justify-center">
{#each types as type} {#each types as type}
<div class="p-2"> <div class="p-2">

3
apps/ui/src/routes/services/[id]/configuration/version.svelte
View File

@@ -57,9 +57,6 @@
} }
</script> </script>
<div class="flex space-x-1 p-6 font-bold">
<div class="mr-4 text-2xl tracking-tight">{$t('forms.select_a_service_version')}</div>
</div>
{#if from} {#if from}
<div class="pb-10 text-center"> <div class="pb-10 text-center">
Warning: you are about to change the version of this service.<br />This could cause problem Warning: you are about to change the version of this service.<br />This could cause problem

16
apps/ui/src/routes/services/[id]/index.svelte
View File

@@ -50,17 +50,8 @@
}); });
</script> </script>
<div class="flex items-center space-x-2 p-5 px-6 font-bold lg:hidden"> {#if $status.service.isRunning}
<div class="flex-col"> <div class="mx-auto max-w-6xl px-6 lg:my-0 my-4 lg:pt-0 pt-4 rounded">
<div class="md:max-w-64 truncate text-base tracking-tight md:text-2xl lg:block">
Configuration
</div>
<span class="text-xs">{service.name}</span>
</div>
<ServiceLinks {service} />
</div>
<div class="mx-auto max-w-4xl px-6 py-4">
<div class="text-2xl font-bold">Service Usage</div>
<div class="text-center"> <div class="text-center">
<div class="stat w-64"> <div class="stat w-64">
<div class="stat-title">Used Memory / Memory Limit</div> <div class="stat-title">Used Memory / Memory Limit</div>
@@ -77,5 +68,6 @@
<div class="stat-value text-xl">{usage?.NetIO}</div> <div class="stat-value text-xl">{usage?.NetIO}</div>
</div> </div>
</div> </div>
</div> </div>
{/if}
<Services bind:service bind:readOnly bind:settings /> <Services bind:service bind:readOnly bind:settings />

4
apps/ui/src/routes/settings/global.svelte
View File

@@ -203,10 +203,10 @@
<div class="mt-5"> <div class="mt-5">
<form on:submit|preventDefault={handleSubmit}> <form on:submit|preventDefault={handleSubmit}>
<div <div
class="flex flex-col space-y-4 p-6 lg:p-0 lg:flex-row lg:space-y0 lg:space-x-4 w-full lg:justify-between lg:items-center mb-5" class="flex flex-col space-y-2 p-6 lg:p-0 lg:flex-row lg:space-y0 lg:space-x-4 w-full lg:justify-between lg:items-center mb-5"
> >
<div class="title font-bold">{$t('index.global_settings')}</div> <div class="title font-bold">{$t('index.global_settings')}</div>
<div class="flex lg:flex-row lg:space-x-4 flex-col space-y-4 lg:space-y-0"> <div class="flex lg:flex-row lg:space-x-4 flex-col space-y-2 lg:space-y-0">
<button <button
class="btn btn-sm bg-settings text-black" class="btn btn-sm bg-settings text-black"
type="submit" type="submit"

2
apps/ui/src/routes/settings/ssh-keys.svelte
View File

@@ -65,7 +65,7 @@
<Menu /> <Menu />
<div class="flex flex-col mt-5"> <div class="flex flex-col mt-5">
<div <div
class="flex flex-col space-y-4 p-6 lg:p-0 lg:flex-row lg:space-y0 lg:space-x-4 w-full lg:justify-between lg:items-center mb-5" class="flex flex-col space-y-2 p-6 lg:p-0 lg:flex-row lg:space-y0 lg:space-x-4 w-full lg:justify-between lg:items-center mb-5"
style="min-width: 83vw" style="min-width: 83vw"
> >
<div class="title font-bold">SSH Keys</div> <div class="title font-bold">SSH Keys</div>

4
apps/ui/src/routes/sources/[id]/_Github.svelte
View File

@@ -90,7 +90,7 @@
} }
</script> </script>
<div class="mx-auto max-w-4xl lg:px-6 px-3"> <div class="mx-auto max-w-6xl lg:px-6 px-3">
{#if !source.githubAppId} {#if !source.githubAppId}
<form on:submit|preventDefault={newGithubApp} class="py-4"> <form on:submit|preventDefault={newGithubApp} class="py-4">
<div class="grid gap-1 lg:grid-flow-col pb-7"> <div class="grid gap-1 lg:grid-flow-col pb-7">
@@ -144,7 +144,7 @@
<div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center"> <div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center">
<h1 class="title">{$t('general')}</h1> <h1 class="title">{$t('general')}</h1>
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-4 lg:space-y-0 w-full"> <div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-2 lg:space-y-0 w-full">
<button class="btn btn-sm bg-sources" type="submit" disabled={loading} <button class="btn btn-sm bg-sources" type="submit" disabled={loading}
>{loading ? 'Saving...' : 'Save'}</button >{loading ? 'Saving...' : 'Save'}</button
> >

4
apps/ui/src/routes/sources/[id]/_Gitlab.svelte
View File

@@ -143,11 +143,11 @@
} }
</script> </script>
<div class="mx-auto max-w-4xl px-6"> <div class="mx-auto max-w-6xl px-6">
<form on:submit|preventDefault={handleSubmit} class="py-4"> <form on:submit|preventDefault={handleSubmit} class="py-4">
<div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center"> <div class="flex lg:flex-row lg:justify-between flex-col space-y-3 w-full lg:items-center">
<h1 class="title">General</h1> <h1 class="title">General</h1>
<div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-4 lg:space-y-0 w-full"> <div class="flex flex-col lg:flex-row lg:space-x-4 lg:w-fit space-y-2 lg:space-y-0 w-full">
{#if $appSession.isAdmin} {#if $appSession.isAdmin}
<button type="submit" class="btn btn-sm bg-sources" disabled={loading} <button type="submit" class="btn btn-sm bg-sources" disabled={loading}
>{loading ? $t('forms.saving') : $t('forms.save')}</button >{loading ? $t('forms.saving') : $t('forms.save')}</button

16
apps/ui/src/tailwind.css
View File

@@ -28,7 +28,7 @@ input, .input {
@apply h-12 w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm; @apply h-12 w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
} }
textarea { textarea {
@apply min-w-[24rem] rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm; @apply min-w-[14rem] rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
} }
#svelte .custom-select-wrapper .selectContainer.disabled input { #svelte .custom-select-wrapper .selectContainer.disabled input {
@@ -40,7 +40,7 @@ textarea {
} }
#svelte .custom-select-wrapper .selectContainer { #svelte .custom-select-wrapper .selectContainer {
@apply h-12 w-96 rounded border border-coolgray-300 border-dashed bg-coolgray-200 p-2 px-0 text-xs tracking-tight outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 md:text-sm; @apply h-12 w-96 rounded border border-coolgray-300 bg-coolgray-200 p-2 px-0 text-xs tracking-tight outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 md:text-sm w-full;
} }
#svelte .listContainer { #svelte .listContainer {
@@ -82,7 +82,7 @@ select {
} }
label { label {
@apply inline-block w-64 text-xs tracking-tight md:text-sm; @apply inline-block;
} }
.btn { .btn {
@apply text-white text-base min-w-fit; @apply text-white text-base min-w-fit;
@@ -97,7 +97,7 @@ a {
} }
.title { .title {
@apply mr-4 tracking-tight text-2xl font-bold; @apply text-lg lg:text-2xl font-bold;
} }
.nav-main { .nav-main {
@apply fixed top-0 left-0 min-h-screen w-16 min-w-[4rem] overflow-hidden border-r border-stone-800 bg-coolgray-200 scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 xl:overflow-visible; @apply fixed top-0 left-0 min-h-screen w-16 min-w-[4rem] overflow-hidden border-r border-stone-800 bg-coolgray-200 scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 xl:overflow-visible;
@@ -197,10 +197,10 @@ a {
border: none; border: none;
} }
input {
@apply w-48 lg:w-96;
}
.header { .header {
@apply flex flex-row px-4 justify-between items-center bg-neutral-focus z-10 w-full mb-10; @apply flex flex-row z-10 w-full py-5 px-5;
}
.burger {
@apply block m-[2px] h-[3px] w-5 rounded
} }