feat: add support for multiple ports (TCP and UDP) closes #17

YuukanOO · May 17, 2024 · fb3da29 · fb3da29
1 parent cae1223
commit fb3da29
Show file tree

Hide file tree

Showing 77 changed files with 3,600 additions and 1,942 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -1,4 +1,5 @@
 examples
+Makefile
 Dockerfile
 compose.yml
 docs

diff --git a/cmd/config/configuration.go b/cmd/config/configuration.go
@@ -29,7 +29,7 @@ var (
 )
 
 const (
-	databaseFilename              = "seelf.db?_foreign_keys=yes&_txlock=immediate"
+	databaseConnectionString      = "seelf.db?_journal=WAL&_timeout=5000&_foreign_keys=yes&_txlock=immediate"
 	defaultConfigFilename         = "conf.yml"
 	defaultPort                   = 8080
 	defaultHost                   = ""
@@ -189,7 +189,7 @@ func (c *configuration) IsSecure() bool {
 
 // Gets the connection string to be used.
 func (c *configuration) ConnectionString() string {
-	return "file:" + path.Join(c.Data.Path, databaseFilename)
+	return "file:" + path.Join(c.Data.Path, databaseConnectionString)
 }
 
 // Returns the address to bind the HTTP server to.

diff --git a/cmd/serve/front/src/assets/icons/git.svelte b/cmd/serve/front/src/assets/icons/git.svelte
@@ -1 +1,15 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--mdi" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M2.6 10.59L8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1 1.73a2 2 0 0 0 2 2a2 2 0 0 0 2-2c0-.74-.4-1.39-1-1.73V9.41l2.07 2.09c-.07.15-.07.32-.07.5a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2c-.18 0-.35 0-.5.07L13.93 7.5a1.98 1.98 0 0 0-1.15-2.34c-.43-.16-.88-.2-1.28-.09L9.8 3.38l.79-.78c.78-.79 2.04-.79 2.82 0l7.99 7.99c.79.78.79 2.04 0 2.82l-7.99 7.99c-.78.79-2.04.79-2.82 0L2.6 13.41c-.79-.78-.79-2.04 0-2.82Z"></path></svg>
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	role="img"
+	class="iconify iconify--mdi"
+	width="32"
+	height="32"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 24 24"
+	><path
+		fill="currentColor"
+		d="M2.6 10.59L8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1 1.73a2 2 0 0 0 2 2a2 2 0 0 0 2-2c0-.74-.4-1.39-1-1.73V9.41l2.07 2.09c-.07.15-.07.32-.07.5a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2c-.18 0-.35 0-.5.07L13.93 7.5a1.98 1.98 0 0 0-1.15-2.34c-.43-.16-.88-.2-1.28-.09L9.8 3.38l.79-.78c.78-.79 2.04-.79 2.82 0l7.99 7.99c.79.78.79 2.04 0 2.82l-7.99 7.99c-.78.79-2.04.79-2.82 0L2.6 13.41c-.79-.78-.79-2.04 0-2.82Z"
+	/></svg
+>
diff --git a/cmd/serve/front/src/assets/styles.css b/cmd/serve/front/src/assets/styles.css
@@ -8,6 +8,7 @@
      */
 	--co-background-4: #010409;
 	--co-background-5: #0d1117;
+	--co-background-6: #181c22;
 	--co-divider-4: #30363d;
 	--co-text-3: #6c7179;
 	--co-text-4: #8b949e;
@@ -20,8 +21,9 @@
 	--co-danger-4: #ef4444;
 	--co-warning-1: rgba(251, 191, 36, 0.1);
 	--co-warning-3: #f59e0b;
-	--co-warning-4: #fbbf24;
+	--co-warning-4: hwb(43 14% 2%);
 	--co-primary-0: #111;
+	--co-primary-1: rgba(16, 185, 129, 0.1);
 	--co-primary-3: #065f46;
 	--co-primary-4: #10b981;
 	--co-primary-5: #34d399;

diff --git a/cmd/serve/front/src/components/deployment-card.svelte b/cmd/serve/front/src/components/deployment-card.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type Deployment, DeploymentStatus } from '$lib/resources/deployments';
+	import { type DeploymentDetail, DeploymentStatus } from '$lib/resources/deployments';
 	import type { ComponentProps } from 'svelte';
 	import routes from '$lib/path';
 	import Card from '$components/card.svelte';
@@ -8,11 +8,11 @@
 	import Panel from '$components/panel.svelte';
 	import DeploymentPill from '$components/deployment-pill.svelte';
 	import Display from '$components/display.svelte';
-	import ExternalLaunch from '$assets/icons/external-launch.svelte';
+	import ServiceInfo from '$components/service-info.svelte';
 	import l from '$lib/localization';
 
-	export let data: Deployment;
-	export let isStale = false;
+	export let data: DeploymentDetail;
+	export let latestUrl: Maybe<string> = undefined; // If set, show the oudated panel
 
 	function colorForStatus(status: DeploymentStatus): ComponentProps<Card>['color'] {
 		switch (status) {
@@ -76,24 +76,16 @@
 		{/if}
 		{#if data.state.services && data.state.services?.length > 0}
 			<Display class="large" label="deployment.services">
-				{#if isStale}
+				{#if latestUrl}
 					<Panel class="outdated" title="deployment.outdated" format="inline" variant="warning">
-						<p>{l.translate('deployment.outdated.description')}</p>
+						<p>{@html l.translate('deployment.outdated.description', [latestUrl])}</p>
 					</Panel>
 				{/if}
-				<ul>
+				<ul class="services">
 					{#each data.state.services as service (service.name)}
-						<Stack as="li" justify="space-between">
-							{#if service.url}
-								<Link class="service-url" href={service.url} external newWindow>
-									{service.name}
-									<ExternalLaunch />
-								</Link>
-							{:else}
-								<div>{service.name}</div>
-							{/if}
-							<div class="service-image">{service.image}</div>
-						</Stack>
+						<li class="service">
+							<ServiceInfo data={service} />
+						</li>
 					{/each}
 				</ul>
 			</Display>
@@ -120,35 +112,16 @@
 		grid-column: span 2;
 	}
 
-	.outdated {
-		margin-block-start: var(--sp-2);
-		margin-inline: 1px;
+	.services {
+		margin-block-start: var(--sp-1);
 	}
 
-	.outdated + ul {
+	.service + .service {
 		margin-block-start: var(--sp-2);
 	}
 
-	.service-url {
-		display: flex;
-		align-items: center;
-		gap: var(--sp-1);
-	}
-
-	.service-url svg {
-		height: 1rem;
-		width: 1rem;
-	}
-
-	.service-image {
-		background-color: var(--co-background-5);
-		border-radius: var(--ra-4);
-		border: 1px solid var(--co-divider-4);
-		font: var(--ty-caption);
-		color: var(--co-text-4);
-		padding: 0.125rem var(--sp-2);
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
+	.outdated {
+		margin-block: var(--sp-2);
+		margin-inline: 1px;
 	}
 </style>
diff --git a/cmd/serve/front/src/components/deployment-pill.svelte b/cmd/serve/front/src/components/deployment-pill.svelte
@@ -50,6 +50,7 @@
 	}
 
 	.pill svg {
+		display: block;
 		height: 1rem;
 		width: 1rem;
 	}

diff --git a/cmd/serve/front/src/components/entrypoint-pill.svelte b/cmd/serve/front/src/components/entrypoint-pill.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { Entrypoint } from '$lib/resources/deployments';
+
+	export let data: Entrypoint;
+</script>
+
+{#if data.url}
+	<a class="entry" href={data.url} rel="noopener noreferrer" target="_blank">
+		<span class="port">{data.port}</span>
+		<span class="content">{data.url}</span>
+	</a>
+{:else}
+	<div class="entry">
+		<span class="port">{data.port}</span>
+		<span class="content">{data.router}</span>
+	</div>
+{/if}
+
+<style module>
+	.entry {
+		border: 1px solid var(--co-primary-4);
+		background-color: var(--co-background-5);
+		border-radius: var(--ra-4);
+		border: 1px solid var(--co-divider-4);
+		color: var(--co-text-4) !important;
+		display: flex;
+		align-items: center;
+		font: var(--ty-caption);
+	}
+
+	a.entry:hover,
+	a.entry:focus {
+		border-color: var(--co-primary-4);
+		color: var(--co-primary-4) !important;
+		text-decoration: none;
+	}
+
+	a.entry:focus {
+		outline: var(--ou-primary);
+	}
+
+	.port {
+		background-color: var(--co-warning-1);
+		border-inline-end: 1px solid var(--co-divider-4);
+		border-start-start-radius: var(--ra-4);
+		border-end-start-radius: var(--ra-4);
+		color: var(--co-warning-4);
+		padding: var(--sp-1);
+		flex: 0;
+	}
+
+	a.entry .port {
+		background-color: var(--co-primary-1);
+		color: var(--co-primary-4);
+	}
+
+	.content {
+		padding: var(--sp-1) var(--sp-2);
+		flex: 1;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+</style>
diff --git a/cmd/serve/front/src/components/environment-card.svelte b/cmd/serve/front/src/components/environment-card.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import service, { type Deployment } from '$lib/resources/deployments';
+	import service, { type DeploymentDetail } from '$lib/resources/deployments';
 	import DeploymentsList from '$components/deployments-list.svelte';
 	import DeploymentCard from '$components/deployment-card.svelte';
 	import Stack from '$components/stack.svelte';
 	import Pagination from '$components/pagination.svelte';
 
-	export let data: Deployment;
+	export let data: DeploymentDetail;
 
 	let page = 1;
 

diff --git a/cmd/serve/front/src/components/panel.svelte b/cmd/serve/front/src/components/panel.svelte
@@ -52,6 +52,10 @@
 		font: var(--ty-caption);
 	}
 
+	.container a {
+		color: var(--panel-title-color);
+	}
+
 	details.container {
 		padding: 0;
 	}

diff --git a/cmd/serve/front/src/components/prose.svelte b/cmd/serve/front/src/components/prose.svelte
@@ -16,6 +16,12 @@
 		color: var(--co-primary-4);
 	}
 
+	.prose a:hover,
+	.prose a:focus {
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+
 	.prose strong {
 		color: var(--co-text-5);
 		font-weight: 600;

diff --git a/cmd/serve/front/src/components/service-info.svelte b/cmd/serve/front/src/components/service-info.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { Service } from '$lib/resources/deployments';
+	import Stack from '$components/stack.svelte';
+	import EntrypointPill from '$components/entrypoint-pill.svelte';
+
+	export let data: Service;
+</script>
+
+<Stack as="article" class="container" direction="column" gap={2}>
+	<Stack justify="space-between">
+		<div>{data.name}</div>
+		<div class="image-pill">{data.image}</div>
+	</Stack>
+	{#if data.entrypoints && data.entrypoints.length > 0}
+		<Stack as="ul" wrap="wrap" gap={1}>
+			{#each data.entrypoints as entrypoint (entrypoint.name)}
+				<li class="entrypoint">
+					<EntrypointPill data={entrypoint} />
+				</li>
+			{/each}
+		</Stack>
+	{/if}
+</Stack>
+
+<style module>
+	.container {
+		background-color: var(--co-background-6);
+		border: 1px solid var(--co-divider-4);
+		border-radius: var(--ra-4);
+		padding: var(--sp-2);
+	}
+
+	.entrypoint {
+		overflow: hidden;
+	}
+
+	.image-pill {
+		background-color: var(--co-background-5);
+		border-radius: var(--ra-4);
+		border: 1px solid var(--co-divider-4);
+		font: var(--ty-caption);
+		color: var(--co-text-4);
+		padding: 0.125rem var(--sp-2);
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+</style>
diff --git a/cmd/serve/front/src/lib/localization/en.ts b/cmd/serve/front/src/lib/localization/en.ts
@@ -116,6 +116,7 @@ You may reconsider and try to make the target reachable before deleting it.`,
 	'jobs.policy.preserve_group_order': 'Preserve group order on error',
 	'jobs.policy.wait_others_resource_id': 'Wait for others jobs to finish on resource',
 	'jobs.policy.cancellable': 'Cancellable',
+	'jobs.policy.mergeable': 'Mergeable',
 	'jobs.group': 'group',
 	'jobs.cancel': 'Cancel job',
 	'jobs.cancel.confirm': 'Are you sure you want to cancel this job?',
@@ -172,8 +173,8 @@ You may reconsider and try to make the target reachable before deleting it.`,
 		'Optional specific commit to deploy. Leave empty to deploy the latest branch commit.',
 	'deployment.logs': 'Deployment logs',
 	'deployment.outdated': 'Outdated deployment',
-	'deployment.outdated.description':
-		"You're viewing an old deployment and exposed URLs may have changed and represent what have been exposed at that time.",
+	'deployment.outdated.description': (href: string) =>
+		`You're viewing an old deployment and exposed URLs may have changed and represent what have been exposed at that time. Check out the <a href="${href}">latest one</a>.`,
 	'deployment.started_at': 'started at',
 	'deployment.finished_at': 'finished at',
 	'deployment.queued_at': 'queued at',

diff --git a/cmd/serve/front/src/lib/localization/fr.ts b/cmd/serve/front/src/lib/localization/fr.ts
@@ -119,6 +119,7 @@ Vous devriez probablement essayer de rendre la cible accessible avant de la supp
 		'jobs.policy.preserve_group_order': "Préserve l'ordre au sein du groupe en cas d'erreur",
 		'jobs.policy.wait_others_resource_id': "Attend l'achèvement des tâches sur cette ressource",
 		'jobs.policy.cancellable': 'Annulable',
+		'jobs.policy.mergeable': 'Fusionnable',
 		'jobs.group': 'groupe',
 		'jobs.cancel': 'Annuler la tâche',
 		'jobs.cancel.confirm': 'Voulez-vous vraiment annuler la tâche ?',
@@ -176,8 +177,8 @@ Vous devriez probablement essayer de rendre la cible accessible avant de la supp
 			'Commit spécifique à déployer. Laissez vide pour déployer le dernier commit de la branche.',
 		'deployment.logs': 'Logs de déploiement',
 		'deployment.outdated': 'Déploiement obsolète',
-		'deployment.outdated.description':
-			'Vous visualisez un ancien déploiement et les URLs exposées ici représentent ce qui a été exposé au moment du déploiement.',
+		'deployment.outdated.description': (href: string) =>
+			`Vous visualisez un ancien déploiement et les URLs exposées ici représentent ce qui a été exposé au moment du déploiement. Accéder à <a href="${href}">la dernière version</a>.`,
 		'deployment.started_at': 'démarré à',
 		'deployment.finished_at': 'terminé à',
 		'deployment.queued_at': 'demandé à',

diff --git a/cmd/serve/front/src/lib/resources/apps.ts b/cmd/serve/front/src/lib/resources/apps.ts
@@ -1,22 +1,22 @@
 import fetcher, { type FetchOptions, type FetchService, type QueryResult } from '$lib/fetcher';
 import { POLLING_INTERVAL_MS } from '$lib/config';
 import type { ByUserData } from '$lib/resources/users';
-import type { Deployment } from '$lib/resources/deployments';
+import type { Deployment, DeploymentDetail } from '$lib/resources/deployments';
 
 export type App = {
 	id: string;
 	name: string;
 	cleanup_requested_at?: string;
 	created_at: string;
 	created_by: ByUserData;
-	latest_deployments: LatestDeployments;
+	latest_deployments: LatestDeployments<Deployment>;
 	production_target: TargetSummary;
 	staging_target: TargetSummary;
 };
 
-export type LatestDeployments = {
-	production?: Deployment;
-	staging?: Deployment;
+export type LatestDeployments<T> = {
+	production?: T;
+	staging?: T;
 };
 
 export type EnvironmentVariablesPerService = Record<string, Record<string, string>>;
@@ -34,7 +34,7 @@ export type AppDetail = {
 	cleanup_requested_at?: string;
 	created_at: string;
 	created_by: ByUserData;
-	latest_deployments: LatestDeployments;
+	latest_deployments: LatestDeployments<DeploymentDetail>;
 	version_control?: VersionControl;
 	production: EnvironmentConfig;
 	staging: EnvironmentConfig;