wip: add entrypoints to services and targets

.dockerignore

@@ -1,4 +1,5 @@
 examples
+Makefile
 Dockerfile
 compose.yml
 docs

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.

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
+>

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;

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,10 +8,10 @@
 	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 data: DeploymentDetail;
 	export let isStale = false;
 
 	function colorForStatus(status: DeploymentStatus): ComponentProps<Card>['color'] {
@@ -81,19 +81,11 @@
 						<p>{l.translate('deployment.outdated.description')}</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,20 @@
 		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;
+	.outdated {
+		margin-block-start: var(--sp-2);
+		margin-inline: 1px;
 	}
 
-	.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 + ul {
+		margin-block-start: var(--sp-2);
 	}
 </style>

cmd/serve/front/src/components/deployment-pill.svelte

@@ -50,6 +50,7 @@
 	}
 
 	.pill svg {
+		display: block;
 		height: 1rem;
 		width: 1rem;
 	}

cmd/serve/front/src/components/entrypoint-pill.svelte

@@ -0,0 +1,59 @@
+<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">-</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);
+		flex-shrink: 0;
+	}
+
+	a.entry:hover,
+	a.entry:focus {
+		border-color: var(--co-primary-4);
+		color: var(--co-primary-4) !important;
+	}
+
+	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);
+	}
+
+	a.entry .port {
+		background-color: var(--co-primary-1);
+		color: var(--co-primary-4);
+	}
+
+	.content {
+		padding: var(--sp-1);
+	}
+</style>

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;
 

cmd/serve/front/src/components/service-info.svelte

@@ -0,0 +1,44 @@
+<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>
+					<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);
+	}
+
+	.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>

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;