Merge pull request #641 from coollabsio/next

v3.10.10

apps/api/prisma/migrations/20220928083348_system_wide_git_sources/migration.sql

@@ -0,0 +1,26 @@
+-- RedefineTables
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_GitSource" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "name" TEXT NOT NULL,
+    "forPublic" BOOLEAN NOT NULL DEFAULT false,
+    "type" TEXT,
+    "apiUrl" TEXT,
+    "htmlUrl" TEXT,
+    "customPort" INTEGER NOT NULL DEFAULT 22,
+    "organization" TEXT,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "githubAppId" TEXT,
+    "gitlabAppId" TEXT,
+    "isSystemWide" BOOLEAN NOT NULL DEFAULT false,
+    CONSTRAINT "GitSource_gitlabAppId_fkey" FOREIGN KEY ("gitlabAppId") REFERENCES "GitlabApp" ("id") ON DELETE SET NULL ON UPDATE CASCADE,
+    CONSTRAINT "GitSource_githubAppId_fkey" FOREIGN KEY ("githubAppId") REFERENCES "GithubApp" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);
+INSERT INTO "new_GitSource" ("apiUrl", "createdAt", "customPort", "forPublic", "githubAppId", "gitlabAppId", "htmlUrl", "id", "name", "organization", "type", "updatedAt") SELECT "apiUrl", "createdAt", "customPort", "forPublic", "githubAppId", "gitlabAppId", "htmlUrl", "id", "name", "organization", "type", "updatedAt" FROM "GitSource";
+DROP TABLE "GitSource";
+ALTER TABLE "new_GitSource" RENAME TO "GitSource";
+CREATE UNIQUE INDEX "GitSource_githubAppId_key" ON "GitSource"("githubAppId");
+CREATE UNIQUE INDEX "GitSource_gitlabAppId_key" ON "GitSource"("gitlabAppId");
+PRAGMA foreign_key_check;
+PRAGMA foreign_keys=ON;

apps/api/prisma/schema.prisma

@@ -299,6 +299,7 @@ model GitSource {
   updatedAt    DateTime      @updatedAt
   githubAppId  String?       @unique
   gitlabAppId  String?       @unique
+  isSystemWide Boolean       @default(false)
   gitlabApp    GitlabApp?    @relation(fields: [gitlabAppId], references: [id])
   githubApp    GithubApp?    @relation(fields: [githubAppId], references: [id])
   application  Application[]

apps/api/src/jobs/deployApplication.ts

@@ -211,7 +211,6 @@ import * as buildpacks from '../lib/buildPacks';
 										//
 									}
 									await copyBaseConfigurationFiles(buildPack, workdir, buildId, applicationId, baseImage);
-
 									if (forceRebuild) deployNeeded = true
 									if (!imageFound || deployNeeded) {
 										// if (true) {

apps/api/src/lib/buildPacks/common.ts

@@ -472,7 +472,8 @@ export const saveBuildLog = async ({
 
 	if (isDev) {
 		console.debug(`[${applicationId}] ${addTimestamp}`);
-	}
+		return
+	} 
 	try {
 		return await got.post(`${fluentBitUrl}/${applicationId}_buildlog_${buildId}.csv`, {
 			json: {
@@ -586,9 +587,9 @@ export async function buildImage({
 	} else {
 		await saveBuildLog({ line: `Building image started.`, buildId, applicationId });
 	}
-	if (!debug && isCache) {
+	if (!debug) {
 		await saveBuildLog({
-			line: `Debug turned off. To see more details, allow it in the configuration.`,
+			line: `Debug turned off. To see more details, allow it in the features tab.`,
 			buildId,
 			applicationId
 		});
@@ -607,30 +608,6 @@ export async function buildImage({
 	}
 }
 
-export async function streamEvents({ stream, docker, buildId, applicationId, debug }) {
-	await new Promise((resolve, reject) => {
-		docker.engine.modem.followProgress(stream, onFinished, onProgress);
-		function onFinished(err, res) {
-			if (err) reject(err);
-			resolve(res);
-		}
-		async function onProgress(event) {
-			if (event.error) {
-				reject(event.error);
-			} else if (event.stream) {
-				if (event.stream !== '\n') {
-					if (debug)
-						await saveBuildLog({
-							line: `${event.stream.replace('\n', '')}`,
-							buildId,
-							applicationId
-						});
-				}
-			}
-		}
-	});
-}
-
 export function makeLabelForStandaloneApplication({
 	applicationId,
 	fqdn,
@@ -721,6 +698,7 @@ export async function buildCacheImageWithNode(data, imageForBuild) {
 	if (installCommand) {
 		Dockerfile.push(`RUN ${installCommand}`);
 	}
+	// Dockerfile.push(`ARG CACHEBUST=1`);
 	Dockerfile.push(`RUN ${buildCommand}`);
 	await fs.writeFile(`${workdir}/Dockerfile-cache`, Dockerfile.join('\n'));
 	await buildImage({ ...data, isCache: true });

apps/api/src/lib/buildPacks/docker.ts

@@ -13,36 +13,33 @@ export default async function (data) {
 		pullmergeRequestId,
 		dockerFileLocation
 	} = data
-	try {
-		const file = `${workdir}${baseDirectory}${dockerFileLocation}`;
-		data.workdir = `${workdir}${baseDirectory}`;
-		const Dockerfile: Array<string> = (await fs.readFile(`${file}`, 'utf8'))
-			.toString()
-			.trim()
-			.split('\n');
-		Dockerfile.push(`LABEL coolify.buildId=${buildId}`);
-		if (secrets.length > 0) {
-			secrets.forEach((secret) => {
-				if (secret.isBuildSecret) {
-					if (
-						(pullmergeRequestId && secret.isPRMRSecret) ||
-						(!pullmergeRequestId && !secret.isPRMRSecret)
-					) {
-						Dockerfile.unshift(`ARG ${secret.name}=${secret.value}`);
+	const file = `${workdir}${baseDirectory}${dockerFileLocation}`;
+	data.workdir = `${workdir}${baseDirectory}`;
+	const DockerfileRaw = await fs.readFile(`${file}`, 'utf8')
+	const Dockerfile: Array<string> = DockerfileRaw
+		.toString()
+		.trim()
+		.split('\n');
+	Dockerfile.push(`LABEL coolify.buildId=${buildId}`);
+	if (secrets.length > 0) {
+		secrets.forEach((secret) => {
+			if (secret.isBuildSecret) {
+				if (
+					(pullmergeRequestId && secret.isPRMRSecret) ||
+					(!pullmergeRequestId && !secret.isPRMRSecret)
+				) {
+					Dockerfile.unshift(`ARG ${secret.name}=${secret.value}`);
 
-						Dockerfile.forEach((line, index) => {
-							if (line.startsWith('FROM')) {
-								Dockerfile.splice(index + 1, 0, `ARG ${secret.name}`);
-							}
-						});
-					}
+					Dockerfile.forEach((line, index) => {
+						if (line.startsWith('FROM')) {
+							Dockerfile.splice(index + 1, 0, `ARG ${secret.name}`);
+						}
+					});
 				}
-			});
-		}
-
-		await fs.writeFile(`${workdir}${dockerFileLocation}`, Dockerfile.join('\n'));
-		await buildImage(data);
-	} catch (error) {
-		throw error;
+			}
+		});
 	}
+
+	await fs.writeFile(`${workdir}${dockerFileLocation}`, Dockerfile.join('\n'));
+	await buildImage(data);
 }

apps/api/src/lib/common.ts

@@ -21,7 +21,7 @@ import { scheduler } from './scheduler';
 import { supportedServiceTypesAndVersions } from './services/supportedVersions';
 import { includeServices } from './services/common';
 
-export const version = '3.10.8';
+export const version = '3.10.10';
 export const isDev = process.env.NODE_ENV === 'development';
 
 const algorithm = 'aes-256-ctr';
@@ -1651,10 +1651,10 @@ export async function cleanupDockerStorage(dockerId, lowDiskSpace, force) {
 		}
 	} catch (error) { }
 	if (lowDiskSpace || force) {
-		if (isDev) {
-			if (!force) console.log(`[DEV MODE] Low disk space: ${lowDiskSpace}`);
-			return;
-		}
+		// if (isDev) {
+		// 	if (!force) console.log(`[DEV MODE] Low disk space: ${lowDiskSpace}`);
+		// 	return;
+		// }
 		try {
 			await executeDockerCmd({
 				dockerId,

apps/api/src/routes/api/v1/handlers.ts

@@ -135,7 +135,7 @@ export async function showDashboard(request: FastifyRequest) {
 			include: { destinationDocker: true, teams: true },
 		});
 		const gitSources = await prisma.gitSource.findMany({
-			where: { teams: { some: { id: teamId === "0" ? undefined : teamId } } },
+			where: { OR: [{ teams: { some: { id: teamId === "0" ? undefined : teamId } } }, { isSystemWide: true }] },
 			include: { teams: true },
 		});
 		const destinations = await prisma.destinationDocker.findMany({

apps/api/src/routes/api/v1/sources/handlers.ts

@@ -9,7 +9,7 @@ export async function listSources(request: FastifyRequest) {
     try {
         const teamId = request.user?.teamId;
         const sources = await prisma.gitSource.findMany({
-            where: { teams: { some: { id: teamId === '0' ? undefined : teamId } } },
+            where: { OR: [{ teams: { some: { id: teamId === "0" ? undefined : teamId } } }, { isSystemWide: true }] },
             include: { teams: true, githubApp: true, gitlabApp: true }
         });
         return {
@@ -22,11 +22,11 @@ export async function listSources(request: FastifyRequest) {
 export async function saveSource(request, reply) {
     try {
         const { id } = request.params
-        let { name, htmlUrl, apiUrl, customPort } = request.body
+        let { name, htmlUrl, apiUrl, customPort, isSystemWide } = request.body
         if (customPort) customPort = Number(customPort)
         await prisma.gitSource.update({
             where: { id },
-            data: { name, htmlUrl, apiUrl, customPort }
+            data: { name, htmlUrl, apiUrl, customPort, isSystemWide }
         });
         return reply.code(201).send()
     } catch ({ status, message }) {
@@ -56,7 +56,7 @@ export async function getSource(request: FastifyRequest<OnlyId>) {
         }
 
         const source = await prisma.gitSource.findFirst({
-            where: { id, teams: { some: { id: teamId === '0' ? undefined : teamId } } },
+            where: { id, OR: [{ teams: { some: { id: teamId === "0" ? undefined : teamId } } }, { isSystemWide: true }] },
             include: { githubApp: true, gitlabApp: true }
         });
         if (!source) {
@@ -104,7 +104,7 @@ export async function saveGitHubSource(request: FastifyRequest<SaveGitHubSource>
         const { teamId } = request.user
 
         const { id } = request.params
-        let { name, htmlUrl, apiUrl, organization, customPort } = request.body
+        let { name, htmlUrl, apiUrl, organization, customPort, isSystemWide } = request.body
 
         if (customPort) customPort = Number(customPort)
         if (id === 'new') {
@@ -117,6 +117,7 @@ export async function saveGitHubSource(request: FastifyRequest<SaveGitHubSource>
                     apiUrl,
                     organization,
                     customPort,
+                    isSystemWide,
                     type: 'github',
                     teams: { connect: { id: teamId } }
                 }

apps/api/src/routes/api/v1/sources/types.ts

@@ -7,6 +7,7 @@ export interface SaveGitHubSource extends OnlyId {
         apiUrl: string,
         organization: string,
         customPort: number,
+        isSystemWide: boolean
     }
 }
 export interface SaveGitLabSource extends OnlyId {

apps/ui/src/lib/components/Beta.svelte

@@ -0,0 +1 @@
+<span class="badge bg-coollabs-gradient rounded text-white font-normal"> BETA </span>

apps/ui/src/lib/components/Setting.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
+	import Beta from './Beta.svelte';
 	import Explaner from './Explainer.svelte';
 	import Tooltip from './Tooltip.svelte';
 
 	export let id: any;
+	export let customClass: any = null;
 	export let setting: any;
 	export let title: any;
+	export let isBeta: any = false;
 	export let description: any;
 	export let isCenter = true;
 	export let disabled = false;
@@ -18,13 +21,16 @@
 		<!-- svelte-ignore a11y-label-has-associated-control -->
 		<label>
 			{title}
+			{#if isBeta}
+				<Beta />
+			{/if}
 			{#if description && description !== ''}
 				<Explaner explanation={description} />
 			{/if}
 		</label>
 	</div>
 </div>
-<div class:text-center={isCenter} class="flex justify-center">
+<div class:text-center={isCenter} class={`flex justify-center ${customClass}`}>
 	<div
 		on:click
 		aria-pressed="false"

apps/ui/src/lib/components/UpdateAvailable.svelte

@@ -86,7 +86,7 @@
 				id="update"
 				disabled={updateStatus.success === false}
 				on:click={update}
-				class="icons bg-coollabs-gradient text-white duration-75 hover:scale-105  w-full"
+				class="icons bg-coollabs-gradient text-white duration-75 hover:scale-105 w-full"
 			>
 				{#if updateStatus.loading}
 					<svg

apps/ui/src/lib/components/Usage.svelte

@@ -27,6 +27,7 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { get, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
+	import Beta from './Beta.svelte';
 	async function getStatus() {
 		if (loading.usage) return;
 		loading.usage = true;
@@ -78,7 +79,7 @@
 			<h1 class="font-bold text-lg lg:text-xl truncate">
 				{server.name}
 				{#if server.remoteEngine}
-					<span class="badge bg-coollabs-gradient rounded text-white"> BETA </span>
+					<Beta />
 				{/if}
 			</h1>
 			<div class="text-xs">

apps/ui/src/routes/_NewResource.svelte

@@ -18,8 +18,8 @@
 
 <div class="dropdown dropdown-bottom">
 	<slot>
-		<label for="new" tabindex="0" class="btn btn-square btn-sm bg-coollabs">
-			<svg
+		<label for="new" tabindex="0" class="btn btn-sm text-sm bg-coollabs hover:bg-coollabs-100">
+			Create New Resource <svg
 				class="h-6 w-6"
 				xmlns="http://www.w3.org/2000/svg"
 				fill="none"
@@ -35,11 +35,7 @@
 		>
 	</slot>
 
-	<ul
-		id="new"
-		tabindex="0"
-		class="dropdown-content menu p-2 shadow bg-coolgray-300 rounded w-52"
-	>
+	<ul id="new" tabindex="0" class="dropdown-content menu p-2 shadow bg-coolgray-300 rounded w-52">
 		<li>
 			<button on:click={newApplication} class="no-underline hover:bg-applications rounded-none ">
 				<svg

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

@@ -59,6 +59,7 @@
 	import { goto } from '$app/navigation';
 	import { onDestroy, onMount } from 'svelte';
 	import { t } from '$lib/translations';
+	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 	import {
 		appSession,
 		status,
@@ -75,10 +76,25 @@
 
 	let statusInterval: any;
 	let forceDelete = false;
-	const { id } = $page.params;
 
+	const { id } = $page.params;
 	$isDeploymentEnabled = checkIfDeploymentEnabledApplications($appSession.isAdmin, application);
 
+	async function deleteApplication(name: string, force: boolean) {
+		const sure = confirm($t('application.confirm_to_delete', { name }));
+		if (sure) {
+			try {
+				await del(`/applications/${id}`, { id, force });
+				return await goto('/');
+			} catch (error) {
+				if (error.message.startsWith(`Command failed: SSH_AUTH_SOCK=/tmp/coolify-ssh-agent.pid`)) {
+					forceDelete = true;
+				}
+				return errorNotification(error);
+			} 
+		}
+	}
+
 	async function handleDeploySubmit(forceRebuild = false) {
 		if (!$isDeploymentEnabled) return;
 		try {
@@ -172,13 +188,13 @@
 </script>
 
 <div class="mx-auto max-w-screen-2xl px-6 grid grid-cols-1 lg:grid-cols-2">
-	<nav class="header flex flex-row order-2 lg:order-1 px-0 lg:px-4">
+	<nav class="header flex flex-row order-2 lg:order-1 px-0 lg:px-4 items-start">
 		<div class="title lg:pb-10">
 			{#if $page.url.pathname === `/applications/${id}/configuration/source`}
 				Select a Source
 			{:else if $page.url.pathname === `/applications/${id}/configuration/destination`}
 				Select a Destination
-				{:else if $page.url.pathname === `/applications/${id}/configuration/repository`}
+			{:else if $page.url.pathname === `/applications/${id}/configuration/repository`}
 				Select a Repository
 			{:else if $page.url.pathname === `/applications/${id}/configuration/buildpack`}
 				Select a Build Pack
@@ -195,6 +211,32 @@
 				</div>
 			{/if}
 		</div>
+		{#if $page.url.pathname.startsWith(`/applications/${id}/configuration/`)}
+		<div class="px-2">
+			{#if forceDelete}
+				<button
+					on:click={() => deleteApplication(application.name, true)}
+					disabled={!$appSession.isAdmin}
+					class:bg-red-600={$appSession.isAdmin}
+					class:hover:bg-red-500={$appSession.isAdmin}
+					class="btn btn-sm btn-error text-sm"
+				>
+					Force Delete Application
+				</button>
+			{:else}
+				<button
+					on:click={() => deleteApplication(application.name, false)}
+					disabled={!$appSession.isAdmin}
+					class:bg-red-600={$appSession.isAdmin}
+					class:hover:bg-red-500={$appSession.isAdmin}
+					class="btn btn-sm btn-error text-sm"
+				>
+				 Delete Application
+				</button>
+			{/if}
+		</div>
+
+		{/if}
 	</nav>
 	<div
 		class="pt-4 flex flex-row items-start justify-center lg:justify-end space-x-2 order-1 lg:order-2"
@@ -320,8 +362,7 @@
 				</svg>
 			</button>
 			<Tooltip triggeredBy="#forceredeploy">Force Redeploy (without cache)</Tooltip>
-		{:else}
-		{#if $isDeploymentEnabled}
+		{:else if $isDeploymentEnabled && !$page.url.pathname.startsWith(`/applications/${id}/configuration/`)}
 			<button
 				class="icons flex items-center font-bold"
 				disabled={!$isDeploymentEnabled}
@@ -342,7 +383,6 @@
 				</svg>
 				Deploy
 			</button>
-			{/if}
 		{/if}
 
 		{#if $location && $status.application.isRunning}

apps/ui/src/routes/applications/[id]/configuration/_GithubRepositories.svelte

@@ -152,8 +152,8 @@
 	</div>
 {:else}
 	<form on:submit|preventDefault={handleSubmit} class="px-10">
-		<div class="flex lg:flex-row flex-col lg:space-y-0 space-y-2 space-x-0 lg:space-x-2 items-center">
-				<div class="custom-select-wrapper w-1/2"><label for="repository" class="pb-1">Repository</label>
+		<div class="flex lg:flex-row flex-col lg:space-y-0 space-y-2 space-x-0 lg:space-x-2 items-center lg:justify-center">
+				<div class="custom-select-wrapper"><label for="repository" class="pb-1">Repository</label>
 					<Select
 						placeholder={loading.repositories
 							? $t('application.configuration.loading_repositories')
@@ -168,7 +168,7 @@
 					/>
 				</div>
 				<input class="hidden" bind:value={selected.projectId} name="projectId" />
-				<div class="custom-select-wrapper w-1/2"><label for="repository" class="pb-1">Branch</label>
+				<div class="custom-select-wrapper"><label for="repository" class="pb-1">Branch</label>
 					<Select
 						placeholder={loading.branches
 							? $t('application.configuration.loading_branches')

apps/ui/src/routes/applications/[id]/configuration/_GitlabRepositories.svelte

@@ -328,8 +328,9 @@
 </script>
 
 <form on:submit={handleSubmit}>
-	<div class="flex flex-col space-y-2 px-4 xl:flex-row xl:space-y-0 xl:space-x-2 ">
+	<div class="flex lg:flex-row flex-col lg:space-y-0 space-y-2 space-x-0 lg:space-x-2 items-center lg:justify-center">
 		<div class="custom-select-wrapper">
+			<label for="groups" class="pb-1">Groups</label>
 			<Select
 				placeholder={loading.base
 					? $t('application.configuration.loading_groups')
@@ -355,6 +356,7 @@
 			/>
 		</div>
 		<div class="custom-select-wrapper">
+			<label for="projects" class="pb-1">Projects</label>
 			<Select
 				placeholder={loading.projects
 					? $t('application.configuration.loading_projects')
@@ -380,6 +382,7 @@
 			/>
 		</div>
 		<div class="custom-select-wrapper">
+			<label for="branches" class="pb-1">Branches</label>
 			<Select
 				placeholder={loading.branches
 					? $t('application.configuration.loading_branches')

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

@@ -53,7 +53,6 @@
 			return source;
 		}
 	});
-
 	async function handleSubmit(gitSourceId: string) {
 		try {
 			await post(`/applications/${id}/configuration/source`, { gitSourceId });
@@ -71,7 +70,7 @@
 <div class="max-w-screen-2xl mx-auto px-9">
 	<div class="title pb-8">Git App</div>
 	<div class="flex flex-wrap justify-center">
-		{#if !filteredSources || ownSources.length === 0}
+		{#if !filteredSources}
 			<div class="flex-col">
 				<div class="pb-2 text-center font-bold">
 					{$t('application.configuration.no_configurable_git')}
@@ -169,11 +168,68 @@
 							<button
 								disabled={source.gitlabApp && !source.gitlabAppId}
 								type="submit"
-								class="disabled:opacity-95 bg-coolgray-200 disabled:text-white box-selection hover:bg-orange-700 group"
+								class="relative disabled:opacity-95 bg-coolgray-200 disabled:text-white box-selection hover:bg-orange-700 group"
 								class:border-red-500={source.gitlabApp && !source.gitlabAppId}
 								class:border-0={source.gitlabApp && !source.gitlabAppId}
 								class:border-l-4={source.gitlabApp && !source.gitlabAppId}
 							>
+								<div class="absolute top-0 left-0 -m-5 flex">
+									{#if source?.type === 'gitlab'}
+										<svg viewBox="0 0 128 128" class="h-10 w-10">
+											<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 source?.type === 'github'}
+										<svg viewBox="0 0 128 128" class="h-10 w-10">
+											<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}
+									{#if source.isSystemWide}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-10 w-10"
+											viewBox="0 0 24 24"
+											stroke-width="1.5"
+											stroke="currentColor"
+											fill="none"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										>
+											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+											<circle cx="12" cy="12" r="9" />
+											<line x1="3.6" y1="9" x2="20.4" y2="9" />
+											<line x1="3.6" y1="15" x2="20.4" y2="15" />
+											<path d="M11.5 3a17 17 0 0 0 0 18" />
+											<path d="M12.5 3a17 17 0 0 1 0 18" />
+										</svg>
+									{/if}
+								</div>
+
 								<div class="font-bold text-xl text-center truncate">{source.name}</div>
 								{#if source.gitlabApp && !source.gitlabAppId}
 									<div class="font-bold text-center truncate text-red-500 group-hover:text-white">

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

@@ -266,7 +266,6 @@
 		await getBaseBuildImages();
 		await handleSubmit();
 	}
-
 	async function isDNSValid(domain: any, isWWW: any) {
 		try {
 			await get(`/applications/${id}/check?domain=${domain}`);
@@ -707,24 +706,6 @@
 						/>
 					</div>
 				{/if}
-				{#if application.buildPack === 'docker'}
-					<div class="grid grid-cols-2 items-center pt-4">
-						<label for="dockerFileLocation"
-							>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>"}
-							/></label
-						>
-						<input
-							class="w-full"
-							disabled={isDisabled}
-							readonly={!$appSession.isAdmin}
-							name="dockerFileLocation"
-							id="dockerFileLocation"
-							bind:value={application.dockerFileLocation}
-							placeholder="default: /Dockerfile"
-						/>
-					</div>
-				{/if}
 				{#if application.buildPack === 'deno'}
 					<div class="grid grid-cols-2 items-center">
 						<label for="denoMainFile">Main File</label>
@@ -776,6 +757,31 @@
 						/>
 					</div>
 				{/if}
+				{#if application.buildPack === 'docker'}
+					<div class="grid grid-cols-2 items-center pb-4">
+						<label for="dockerFileLocation"
+						class="mb-10"
+							>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>"}
+							/></label
+						>
+						<div class="form-control w-full">
+							<input
+							class="w-full input"
+							disabled={isDisabled}
+							readonly={!$appSession.isAdmin}
+							name="dockerFileLocation"
+							id="dockerFileLocation"
+							bind:value={application.dockerFileLocation}
+							placeholder="default: /Dockerfile"
+						/>
+							<label class="label">
+							  <span class="label-text-alt text-xs">Path: {application.baseDirectory.replace(/^\/$/,'')}{application.dockerFileLocation}</span>
+							</label>
+						  </div>
+						
+					</div>
+				{/if}
 				{#if !notNodeDeployments.includes(application.buildPack)}
 					<div class="grid grid-cols-2 items-center">
 						<div class="flex-col">

apps/ui/src/routes/applications/[id]/logs/_BuildLog.svelte

@@ -7,6 +7,7 @@
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import { day } from '$lib/dayjs';
 	import { selectedBuildId } from '$lib/store';
+	import { dev } from '$app/env';
 
 	let logs: any = [];
 	let currentStatus: any;
@@ -104,86 +105,86 @@
 	});
 </script>
 
-	<div class="flex justify-start top-0 pb-2 space-x-2">
-		<button
-			on:click={followBuild}
-			class="btn btn-sm bg-coollabs"
-			disabled={currentStatus !== 'running'}
-			class:bg-coolgray-300={followingLogs || currentStatus !== 'running'}
-			class:text-applications={followingLogs}
+<div class="flex justify-start top-0 pb-2 space-x-2">
+	<button
+		on:click={followBuild}
+		class="btn btn-sm bg-coollabs"
+		disabled={currentStatus !== 'running'}
+		class:bg-coolgray-300={followingLogs || currentStatus !== 'running'}
+		class:text-applications={followingLogs}
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="w-6 h-6 mr-2"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			fill="none"
+			stroke-linecap="round"
+			stroke-linejoin="round"
 		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="w-6 h-6 mr-2"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<circle cx="12" cy="12" r="9" />
-				<line x1="8" y1="12" x2="12" y2="16" />
-				<line x1="12" y1="8" x2="12" y2="16" />
-				<line x1="16" y1="12" x2="12" y2="16" />
-			</svg>
+			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+			<circle cx="12" cy="12" r="9" />
+			<line x1="8" y1="12" x2="12" y2="16" />
+			<line x1="12" y1="8" x2="12" y2="16" />
+			<line x1="16" y1="12" x2="12" y2="16" />
+		</svg>
 
-			{followingLogs ? 'Following Logs...' : 'Follow Logs'}
-		</button>
+		{followingLogs ? 'Following Logs...' : 'Follow Logs'}
+	</button>
 
-		<button
-			on:click={cancelBuild}
-			class:animation-spin={cancelInprogress}
-			class="btn btn-sm"
-			disabled={currentStatus !== 'running'}
-			class:bg-coolgray-300={cancelInprogress || currentStatus !== 'running'}
+	<button
+		on:click={cancelBuild}
+		class:animation-spin={cancelInprogress}
+		class="btn btn-sm"
+		disabled={currentStatus !== 'running'}
+		class:bg-coolgray-300={cancelInprogress || currentStatus !== 'running'}
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="w-6 h-6 mr-2"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			fill="none"
+			stroke-linecap="round"
+			stroke-linejoin="round"
 		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="w-6 h-6 mr-2"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				fill="none"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-			>
-				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-				<circle cx="12" cy="12" r="9" />
-				<path d="M10 10l4 4m0 -4l-4 4" />
-			</svg>
-			{cancelInprogress ? 'Cancelling...' : 'Cancel Build'}
-		</button>
-		{#if currentStatus === 'running'}
+			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+			<circle cx="12" cy="12" r="9" />
+			<path d="M10 10l4 4m0 -4l-4 4" />
+		</svg>
+		{cancelInprogress ? 'Cancelling...' : 'Cancel Build'}
+	</button>
+	{#if currentStatus === 'running'}
 		<button id="streaming" class="btn btn-sm bg-transparent border-none loading" />
 		<Tooltip triggeredBy="#streaming">Streaming logs</Tooltip>
-		{/if}
-	</div>
-	{#if currentStatus === 'queued'}
-		<div
-			class="font-mono w-full bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col whitespace-nowrap scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
-		>
-			{$t('application.build.queued_waiting_exec')}
-		</div>
-	{:else if logs.length > 0}
-		<div
-			bind:this={logsEl}
-			on:scroll={detect}
-			class="font-mono w-full bg-coolgray-100 border border-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
-		>
-			{#each logs as log}
-				{#if fromDb}
-					<div>{log.line + '\n'}</div>
-				{:else}
-					<div>[{day.unix(log.time).format('HH:mm:ss.SSS')}] {log.line + '\n'}</div>
-				{/if}
-			{/each}
-		</div>
-	{:else}
-		<div
-			class="font-mono w-full bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col whitespace-nowrap scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
-		>
-			No logs found yet.
-		</div>
 	{/if}
+</div>
+{#if currentStatus === 'queued'}
+	<div
+		class="font-mono w-full bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col whitespace-nowrap scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
+	>
+		{$t('application.build.queued_waiting_exec')}
+	</div>
+{:else if logs.length > 0}
+	<div
+		bind:this={logsEl}
+		on:scroll={detect}
+		class="font-mono w-full bg-coolgray-100 border border-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
+	>
+		{#each logs as log}
+			{#if fromDb}
+				<div>{log.line + '\n'}</div>
+			{:else}
+				<div>[{day.unix(log.time).format('HH:mm:ss.SSS')}] {log.line + '\n'}</div>
+			{/if}
+		{/each}
+	</div>
+{:else}
+	<div
+		class="font-mono w-full bg-coolgray-200 p-5 overflow-x-auto overflox-y-auto max-h-[80vh] rounded mb-20 flex flex-col whitespace-nowrap scrollbar-thumb-coollabs scrollbar-track-coolgray-200 scrollbar-w-1"
+	>
+		{dev ? 'In development, logs are  shown in the console.' : 'No logs found yet.'}
+	</div>
+{/if}

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

@@ -148,7 +148,7 @@
 					class="flex cursor-pointer items-center justify-center py-4 no-underline transition-all duration-150 hover:bg-coolgray-300 hover:shadow-xl"
 					class:bg-coolgray-200={$selectedBuildId === build.id}
 				>
-					<div class="flex-col px-2 text-center min-w-[10rem]">
+					<div class="flex-col px-2 text-center">
 						<div class="text-sm font-bold truncate">
 							{build.branch || application.branch}
 						</div>

apps/ui/src/routes/index.svelte

@@ -41,25 +41,44 @@
 
 	let numberOfGetStatus = 0;
 	let status: any = {};
+	let noInitialStatus: any = {
+		applications: false,
+		services: false,
+		databases: false
+	};
+	let loading = {
+		applications: false,
+		services: false,
+		databases: false
+	};
 	doSearch();
 
 	async function refreshStatusApplications() {
+		loading.applications = true;
+		noInitialStatus.applications = false;
 		numberOfGetStatus = 0;
 		for (const application of applications) {
-			getStatus(application, true);
+			await getStatus(application, true);
 		}
+		loading.applications = false;
 	}
 	async function refreshStatusServices() {
+		loading.services = true;
+		noInitialStatus.services = false;
 		numberOfGetStatus = 0;
 		for (const service of services) {
-			getStatus(service, true);
+			await getStatus(service, true);
 		}
+		loading.services = false;
 	}
 	async function refreshStatusDatabases() {
+		loading.databases = true;
+		noInitialStatus.databases = false;
 		numberOfGetStatus = 0;
 		for (const database of databases) {
-			getStatus(database, true);
+			await getStatus(database, true);
 		}
+		loading.databases = false;
 	}
 	function setInitials(onlyOthers: boolean = false) {
 		return {
@@ -109,9 +128,15 @@
 	async function getStatus(resources: any, force: boolean = false) {
 		const { id, buildPack, dualCerts, type } = resources;
 		if (buildPack && applications.length > 10 && !force) {
+			noInitialStatus.applications = true;
 			return;
 		}
 		if (type && services.length > 10 && !force) {
+			noInitialStatus.services = true;
+			return;
+		}
+		if (databases.length > 10 && !force) {
+			noInitialStatus.databases = true;
 			return;
 		}
 		if (status[id] && !force) return status[id];
@@ -309,6 +334,128 @@
 	{/if}
 </nav>
 <div class="container lg:mx-auto lg:p-0 px-8 pt-5">
+	<div class="space-x-2 lg:flex lg:justify-center  text-center mb-4 ">
+		<button
+			class="btn btn-sm btn-ghost"
+			class:bg-applications={$search === '!app'}
+			class:hover:bg-coollabs={$search !== '!app'}
+			on:click={() => doSearch('!app')}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 mr-2 hidden lg:block "
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentcolor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<rect x="4" y="4" width="6" height="6" rx="1" />
+				<rect x="4" y="14" width="6" height="6" rx="1" />
+				<rect x="14" y="14" width="6" height="6" rx="1" />
+				<line x1="14" y1="7" x2="20" y2="7" />
+				<line x1="17" y1="4" x2="17" y2="10" />
+			</svg> Applications</button
+		>
+		<button
+			class="btn btn-sm btn-ghost"
+			class:bg-services={$search === '!service'}
+			class:hover:bg-coollabs={$search !== '!service'}
+			on:click={() => doSearch('!service')}
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 mr-2 hidden lg:block"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
+			</svg> Services</button
+		>
+		<button
+			class="btn btn-sm btn-ghost "
+			class:bg-databases={$search === '!db'}
+			class:hover:bg-coollabs={$search !== '!db'}
+			on:click={() => doSearch('!db')}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 mr-2 hidden lg:block"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<ellipse cx="12" cy="6" rx="8" ry="3" />
+				<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
+				<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+			</svg> Databases</button
+		>
+		<button
+			class="btn btn-sm btn-ghost"
+			class:bg-sources={$search === '!git'}
+			class:hover:bg-coollabs={$search !== '!git'}
+			on:click={() => doSearch('!git')}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 mr-2 hidden lg:block"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<circle cx="6" cy="6" r="2" />
+				<circle cx="18" cy="18" r="2" />
+				<path d="M11 6h5a2 2 0 0 1 2 2v8" />
+				<polyline points="14 9 11 6 14 3" />
+				<path d="M13 18h-5a2 2 0 0 1 -2 -2v-8" />
+				<polyline points="10 15 13 18 10 21" />
+			</svg> Git Sources</button
+		>
+		<button
+			class="btn btn-sm btn-ghost"
+			class:bg-destinations={$search === '!destination'}
+			class:hover:bg-coollabs={$search !== '!destination'}
+			on:click={() => doSearch('!destination')}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 mr-2 hidden lg:block"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				fill="none"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+				<path
+					d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+				/>
+				<path d="M5 10h3v3h-3z" />
+				<path d="M8 10h3v3h-3z" />
+				<path d="M11 10h3v3h-3z" />
+				<path d="M8 7h3v3h-3z" />
+				<path d="M11 7h3v3h-3z" />
+				<path d="M11 4h3v3h-3z" />
+				<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+				<line x1="10" y1="16" x2="10" y2="16.01" />
+			</svg>Destinations</button
+		>
+	</div>
 	{#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="input-group flex w-full">
@@ -343,40 +490,16 @@
 			</div>
 			<label for="search" class="label w-full mt-3">
 				<span class="label-text text-xs flex flex-wrap gap-2 items-center">
-					<button
-						class:bg-coollabs={$search === '!notmine'}
-						class="badge badge-lg text-white text-xs rounded"
-						on:click={() => doSearch('!notmine')}>Other Teams</button
-					>
-					<button
-						class:bg-coollabs={$search === '!app'}
-						class="badge badge-lg text-white text-xs rounded"
-						on:click={() => doSearch('!app')}>Applications</button
-					>
 					<button
 						class:bg-coollabs={$search === '!bot'}
 						class="badge badge-lg text-white text-xs rounded"
 						on:click={() => doSearch('!bot')}>Bots</button
 					>
+
 					<button
-						class:bg-coollabs={$search === '!service'}
+						class:bg-coollabs={$search === '!notmine'}
 						class="badge badge-lg text-white text-xs rounded"
-						on:click={() => doSearch('!service')}>Services</button
-					>
-					<button
-						class:bg-coollabs={$search === '!db'}
-						class="badge badge-lg text-white text-xs rounded"
-						on:click={() => doSearch('!db')}>Databases</button
-					>
-					<button
-						class:bg-coollabs={$search === '!git'}
-						class="badge badge-lg text-white text-xs rounded"
-						on:click={() => doSearch('!git')}>Git Sources</button
-					>
-					<button
-						class:bg-coollabs={$search === '!destination'}
-						class="badge badge-lg text-white text-xs rounded"
-						on:click={() => doSearch('!destination')}>Destinations</button
+						on:click={() => doSearch('!notmine')}>Other Teams</button
 					>
 					<button
 						class:bg-coollabs={$search === '!running'}
@@ -400,15 +523,19 @@
 	{#if (filtered.applications.length > 0 && applications.length > 0) || filtered.otherApplications.length > 0}
 		<div class="flex items-center mt-10">
 			<h1 class="title lg:text-3xl pr-4">Applications</h1>
-			<button class="btn btn-sm btn-primary" on:click={refreshStatusApplications}
-				>Refresh Status</button
+			<button
+				class="btn btn-sm btn-primary"
+				class:loading={loading.applications}
+				disabled={loading.applications}
+				on:click={refreshStatusApplications}
+				>{noInitialStatus.applications ? 'Load Status' : 'Refresh Status'}</button
 			>
 		</div>
 	{/if}
 	{#if filtered.applications.length > 0 && applications.length > 0}
 		<div class="divider" />
 		<div
-			class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4"
+			class="grid grid-col gap-2 lg:gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4"
 		>
 			{#if filtered.applications.length > 0}
 				{#each filtered.applications as application}
@@ -417,12 +544,16 @@
 							class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator duration-150"
 						>
 							{#await getStatus(application)}
-								<span class="indicator-item badge bg-yellow-500 badge-sm" />
+								<span class="indicator-item badge bg-yellow-300 badge-sm" />
 							{:then}
-								{#if status[application.id] === 'running'}
-									<span class="indicator-item badge bg-success badge-sm" />
-								{:else}
-									<span class="indicator-item badge bg-error badge-sm" />
+								{#if !noInitialStatus.applications}
+									{#if loading.applications}
+										<span class="indicator-item badge bg-yellow-300 badge-sm" />
+									{:else if status[application.id] === 'running'}
+										<span class="indicator-item badge bg-success badge-sm" />
+									{:else}
+										<span class="indicator-item badge bg-error badge-sm" />
+									{/if}
 								{/if}
 							{/await}
 							<div class="w-full flex flex-row">
@@ -511,9 +642,6 @@
 		{#if filtered.applications.length > 0}
 			<div class="divider w-32 mx-auto" />
 		{/if}
-		<div class="flex items-center mt-10">
-			<h1 class="text-lg font-bold">Other Teams</h1>
-		</div>
 	{/if}
 	{#if filtered.otherApplications.length > 0}
 		<div
@@ -523,12 +651,16 @@
 				<a class="no-underline mb-5" href={`/applications/${application.id}`}>
 					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator duration-150">
 						{#await getStatus(application)}
-							<span class="indicator-item badge bg-yellow-500 badge-sm" />
+							<span class="indicator-item badge bg-yellow-300 badge-sm" />
 						{:then}
-							{#if status[application.id] === 'running'}
-								<span class="indicator-item badge bg-success badge-sm" />
-							{:else}
-								<span class="indicator-item badge bg-error badge-sm" />
+							{#if !noInitialStatus.applications}
+								{#if loading.applications}
+									<span class="indicator-item badge bg-yellow-300 badge-sm" />
+								{:else if status[application.id] === 'running'}
+									<span class="indicator-item badge bg-success badge-sm" />
+								{:else}
+									<span class="indicator-item badge bg-error badge-sm" />
+								{/if}
 							{/if}
 						{/await}
 						<div class="w-full flex flex-row">
@@ -610,7 +742,12 @@
 	{#if (filtered.services.length > 0 && services.length > 0) || filtered.otherServices.length > 0}
 		<div class="flex items-center mt-10">
 			<h1 class="title lg:text-3xl pr-4">Services</h1>
-			<button class="btn btn-sm btn-primary" on:click={refreshStatusServices}>Refresh Status</button
+			<button
+				class="btn btn-sm btn-primary"
+				class:loading={loading.services}
+				disabled={loading.services}
+				on:click={refreshStatusServices}
+				>{noInitialStatus.services ? 'Load Status' : 'Refresh Status'}</button
 			>
 		</div>
 	{/if}
@@ -626,12 +763,16 @@
 							class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator duration-150"
 						>
 							{#await getStatus(service)}
-								<span class="indicator-item badge bg-yellow-500 badge-sm" />
+								<span class="indicator-item badge bg-yellow-300 badge-sm" />
 							{:then}
-								{#if status[service.id] === 'running'}
-									<span class="indicator-item badge bg-success badge-sm" />
-								{:else}
-									<span class="indicator-item badge bg-error badge-sm" />
+								{#if !noInitialStatus.services}
+									{#if loading.services}
+										<span class="indicator-item badge bg-yellow-300 badge-sm" />
+									{:else if status[service.id] === 'running'}
+										<span class="indicator-item badge bg-success badge-sm" />
+									{:else}
+										<span class="indicator-item badge bg-error badge-sm" />
+									{/if}
 								{/if}
 							{/await}
 							<div class="w-full flex flex-row">
@@ -686,9 +827,6 @@
 		{#if filtered.services.length > 0}
 			<div class="divider w-32 mx-auto" />
 		{/if}
-		<div class="flex items-center mt-10">
-			<h1 class="text-lg font-bold">Other Teams</h1>
-		</div>
 	{/if}
 	{#if filtered.otherServices.length > 0}
 		<div
@@ -698,12 +836,16 @@
 				<a class="no-underline mb-5" href={`/services/${service.id}`}>
 					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator duration-150">
 						{#await getStatus(service)}
-							<span class="indicator-item badge bg-yellow-500 badge-sm" />
+							<span class="indicator-item badge bg-yellow-300 badge-sm" />
 						{:then}
-							{#if status[service.id] === 'running'}
-								<span class="indicator-item badge bg-success badge-sm" />
-							{:else}
-								<span class="indicator-item badge bg-error badge-sm" />
+							{#if !noInitialStatus.services}
+								{#if loading.services}
+									<span class="indicator-item badge bg-yellow-300 badge-sm" />
+								{:else if status[service.id] === 'running'}
+									<span class="indicator-item badge bg-success badge-sm" />
+								{:else}
+									<span class="indicator-item badge bg-error badge-sm" />
+								{/if}
 							{/if}
 						{/await}
 						<div class="w-full flex flex-row">
@@ -754,8 +896,12 @@
 	{#if (filtered.databases.length > 0 && databases.length > 0) || filtered.otherDatabases.length > 0}
 		<div class="flex items-center mt-10">
 			<h1 class="title lg:text-3xl pr-4">Databases</h1>
-			<button class="btn btn-sm btn-primary" on:click={refreshStatusDatabases}
-				>Refresh Status</button
+			<button
+				class="btn btn-sm btn-primary"
+				on:click={refreshStatusDatabases}
+				class:loading={loading.databases}
+				disabled={loading.databases}
+				>{noInitialStatus.databases ? 'Load Status' : 'Refresh Status'}</button
 			>
 		</div>
 	{/if}
@@ -771,12 +917,16 @@
 							class="w-full rounded p-5 bg-coolgray-200 hover:bg-databases indicator duration-150"
 						>
 							{#await getStatus(database)}
-								<span class="indicator-item badge bg-yellow-500 badge-sm" />
+								<span class="indicator-item badge bg-yellow-300 badge-sm" />
 							{:then}
-								{#if status[database.id] === 'running'}
-									<span class="indicator-item badge bg-success badge-sm" />
-								{:else}
-									<span class="indicator-item badge bg-error badge-sm" />
+								{#if !noInitialStatus.databases}
+									{#if loading.databases}
+										<span class="indicator-item badge bg-yellow-300 badge-sm" />
+									{:else if status[databases.id] === 'running'}
+										<span class="indicator-item badge bg-success badge-sm" />
+									{:else}
+										<span class="indicator-item badge bg-error badge-sm" />
+									{/if}
 								{/if}
 							{/await}
 							<div class="w-full flex flex-row">
@@ -835,9 +985,6 @@
 		{#if filtered.databases.length > 0}
 			<div class="divider w-32 mx-auto" />
 		{/if}
-		<div class="flex items-center mt-10">
-			<h1 class="text-lg font-bold">Other Teams</h1>
-		</div>
 	{/if}
 	{#if filtered.otherDatabases.length > 0}
 		<div
@@ -847,12 +994,16 @@
 				<a class="no-underline mb-5" href={`/databases/${database.id}`}>
 					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-databases indicator duration-150">
 						{#await getStatus(database)}
-							<span class="indicator-item badge bg-yellow-500 badge-sm" />
+							<span class="indicator-item badge bg-yellow-300 badge-sm" />
 						{:then}
-							{#if status[database.id] === 'running'}
-								<span class="indicator-item badge bg-success badge-sm" />
-							{:else}
-								<span class="indicator-item badge bg-error badge-sm" />
+							{#if !noInitialStatus.databases}
+								{#if loading.databases}
+									<span class="indicator-item badge bg-yellow-300 badge-sm" />
+								{:else if status[databases.id] === 'running'}
+									<span class="indicator-item badge bg-success badge-sm" />
+								{:else}
+									<span class="indicator-item badge bg-error badge-sm" />
+								{/if}
 							{/if}
 						{/await}
 						<div class="w-full flex flex-row">
@@ -919,9 +1070,9 @@
 					<a class="no-underline mb-5" href={`/sources/${source.id}`}>
 						<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-sources indicator duration-150">
 							<div class="w-full flex flex-row">
-								<div class="absolute top-0 left-0 -m-5 h-10 w-10">
+								<div class="absolute top-0 left-0 -m-5 flex">
 									{#if source?.type === 'gitlab'}
-										<svg viewBox="0 0 128 128">
+										<svg viewBox="0 0 128 128" class="h-10 w-10">
 											<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"
@@ -943,7 +1094,7 @@
 											/>
 										</svg>
 									{:else if source?.type === 'github'}
-										<svg viewBox="0 0 128 128">
+										<svg viewBox="0 0 128 128" class="h-10 w-10">
 											<g fill="#ffffff"
 												><path
 													fill-rule="evenodd"
@@ -955,6 +1106,26 @@
 											>
 										</svg>
 									{/if}
+
+									{#if source.isSystemWide}
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-10 w-10"
+											viewBox="0 0 24 24"
+											stroke-width="1.5"
+											stroke="currentColor"
+											fill="none"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										>
+											<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+											<circle cx="12" cy="12" r="9" />
+											<line x1="3.6" y1="9" x2="20.4" y2="9" />
+											<line x1="3.6" y1="15" x2="20.4" y2="15" />
+											<path d="M11.5 3a17 17 0 0 0 0 18" />
+											<path d="M12.5 3a17 17 0 0 1 0 18" />
+										</svg>
+									{/if}
 								</div>
 								<div class="w-full flex flex-col">
 									<div class="h-10">
@@ -979,9 +1150,6 @@
 		{#if filtered.gitSources.length > 0}
 			<div class="divider w-32 mx-auto" />
 		{/if}
-		<div class="flex items-center mt-10">
-			<h1 class="text-lg font-bold">Other Teams</h1>
-		</div>
 	{/if}
 	{#if filtered.otherGitSources.length > 0}
 		<div
@@ -991,9 +1159,9 @@
 				<a class="no-underline mb-5" href={`/sources/${source.id}`}>
 					<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-sources indicator duration-150">
 						<div class="w-full flex flex-row">
-							<div class="absolute top-0 left-0 -m-5 h-10 w-10">
+							<div class="absolute top-0 left-0 -m-5 flex">
 								{#if source?.type === 'gitlab'}
-									<svg viewBox="0 0 128 128">
+									<svg viewBox="0 0 128 128" class="h-10 w-10">
 										<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"
@@ -1015,7 +1183,7 @@
 										/>
 									</svg>
 								{:else if source?.type === 'github'}
-									<svg viewBox="0 0 128 128">
+									<svg viewBox="0 0 128 128" class="h-10 w-10">
 										<g fill="#ffffff"
 											><path
 												fill-rule="evenodd"
@@ -1027,6 +1195,26 @@
 										>
 									</svg>
 								{/if}
+
+								{#if source.isSystemWide}
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-10 w-10"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										fill="none"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+										<circle cx="12" cy="12" r="9" />
+										<line x1="3.6" y1="9" x2="20.4" y2="9" />
+										<line x1="3.6" y1="15" x2="20.4" y2="15" />
+										<path d="M11.5 3a17 17 0 0 0 0 18" />
+										<path d="M12.5 3a17 17 0 0 1 0 18" />
+									</svg>
+								{/if}
 							</div>
 							<div class="w-full flex flex-col">
 								<div class="h-10">
@@ -1130,9 +1318,6 @@
 		{#if filtered.destinations.length > 0}
 			<div class="divider w-32 mx-auto" />
 		{/if}
-		<div class="flex items-center mt-10">
-			<h1 class="text-lg font-bold">Other Teams</h1>
-		</div>
 	{/if}
 	{#if filtered.otherDestinations.length > 0}
 		<div

apps/ui/src/routes/settings/certificates.svelte

@@ -20,6 +20,7 @@
 	export let certificates: any;
 	import { del, post } from '$lib/api';
 	import { errorNotification } from '$lib/common';
+	import Beta from '$lib/components/Beta.svelte';
 
 	let loading = {
 		save: false
@@ -55,40 +56,40 @@
 	}
 </script>
 
-	<div class="mx-auto w-full">
-		<div class="flex border-b border-coolgray-500 mb-6">
-			<div class="title font-bold pb-3 pr-4">SSL Certificates <span class="badge rounded bg-coollabs-gradient text-white">BETA</span></div>
-			<label for="my-modal" class="btn btn-sm btn-primary" on:click={() => (isModalActive = true)}
-				>Add SSL Certificate</label
-			>
-		</div>
-		{#if certificates.length > 0}
-			<table class="table w-full">
-				<thead>
-					<tr>
-						<th>Common Name</th>
-						<th>CreatedAt</th>
-						<th>Actions</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each certificates as cert}
-						<tr>
-							<td>{cert.commonName}</td>
-							<td>{cert.createdAt}</td>
-							<td
-								><button on:click={() => deleteCertificate(cert.id)} class="btn btn-sm btn-error"
-									>Delete</button
-								></td
-							>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		{:else}
-			<div class="text-sm">No SSL Certificate found</div>
-		{/if}
+<div class="mx-auto w-full">
+	<div class="flex border-b border-coolgray-500 mb-6">
+		<div class="title font-bold pb-3 pr-4">SSL Certificates <Beta /></div>
+		<label for="my-modal" class="btn btn-sm btn-primary" on:click={() => (isModalActive = true)}
+			>Add SSL Certificate</label
+		>
 	</div>
+	{#if certificates.length > 0}
+		<table class="table w-full">
+			<thead>
+				<tr>
+					<th>Common Name</th>
+					<th>CreatedAt</th>
+					<th>Actions</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each certificates as cert}
+					<tr>
+						<td>{cert.commonName}</td>
+						<td>{cert.createdAt}</td>
+						<td
+							><button on:click={() => deleteCertificate(cert.id)} class="btn btn-sm btn-error"
+								>Delete</button
+							></td
+						>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	{:else}
+		<div class="text-sm">No SSL Certificate found</div>
+	{/if}
+</div>
 
 {#if isModalActive}
 	<input type="checkbox" id="my-modal" class="modal-toggle" />

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

@@ -8,6 +8,7 @@
 	import { addToast, appSession } from '$lib/store';
 	import { dev } from '$app/env';
 	import Explainer from '$lib/components/Explainer.svelte';
+	import Setting from '$lib/components/Setting.svelte';
 
 	const { id } = $page.params;
 
@@ -21,7 +22,8 @@
 			await post(`/sources/${id}`, {
 				name: source.name,
 				htmlUrl: source.htmlUrl.replace(/\/$/, ''),
-				apiUrl: source.apiUrl.replace(/\/$/, '')
+				apiUrl: source.apiUrl.replace(/\/$/, ''),
+				isSystemWide: source.isSystemWide
 			});
 			return addToast({
 				message: 'Configuration saved.',
@@ -43,7 +45,8 @@
 				htmlUrl: source.htmlUrl.replace(/\/$/, ''),
 				apiUrl: source.apiUrl.replace(/\/$/, ''),
 				organization: source.organization,
-				customPort: source.customPort
+				customPort: source.customPort,
+				isSystemWide: source.isSystemWide
 			});
 			const { organization, htmlUrl } = source;
 			const { fqdn, ipv4, ipv6 } = settings;
@@ -88,6 +91,16 @@
 			return errorNotification(error);
 		}
 	}
+	async function changeSettings(name: any, save: boolean) {
+		if ($appSession.teamId === '0') {
+			if (name === 'isSystemWide') {
+				source.isSystemWide = !source.isSystemWide;
+			}
+			if (save) {
+				await handleSubmit();
+			}
+		}
+	}
 </script>
 
 <div class="mx-auto max-w-6xl lg:px-6 px-3">
@@ -104,13 +117,13 @@
 				{/if}
 			</div>
 			<div class="grid gap-2 grid-cols-2 auto-rows-max">
-				<label for="name" class="text-base font-bold text-stone-100">Name</label>
+				<label for="name">Name</label>
 				<input class="w-full" name="name" id="name" required bind:value={source.name} />
-				<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
+				<label for="htmlUrl">HTML URL</label>
 				<input class="w-full" name="htmlUrl" id="htmlUrl" required bind:value={source.htmlUrl} />
-				<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
+				<label for="apiUrl">API URL</label>
 				<input class="w-full" name="apiUrl" id="apiUrl" required bind:value={source.apiUrl} />
-				<label for="customPort" class="text-base font-bold text-stone-100"
+				<label for="customPort"
 					>Custom SSH Port <Explainer
 						explanation={'If you use a self-hosted version of Git, you can provide custom port for all the Git related actions.'}
 					/></label
@@ -124,7 +137,7 @@
 					required
 					value={source.customPort}
 				/>
-				<label for="organization" class="pt-2 text-base font-bold text-stone-100"
+				<label for="organization" class="pt-2"
 					>Organization
 					<Explainer
 						explanation={"Fill it if you would like to use an organization's as your Git Source. Otherwise your user will be used."}
@@ -137,14 +150,26 @@
 					placeholder="eg: coollabsio"
 					bind:value={source.organization}
 				/>
+				<Setting
+					customClass="pt-4"
+					isBeta={true}
+					id="autodeploy"
+					isCenter={false}
+					bind:setting={source.isSystemWide}
+					on:click={() => changeSettings('isSystemWide', false)}
+					title="System Wide Git Source"
+					description="System Wide Git Sources are available to all the users in your Coolify instance. <br><br> <span class='font-bold text-warning'>Use with caution, as it can be a security risk.</span>"
+				/>
 			</div>
 		</form>
 	{:else if source.githubApp?.installationId}
 		<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">
 				<h1 class="title">{$t('general')}</h1>
-				{#if $appSession.isAdmin}
-					<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 && $appSession.teamId === '0'}
+					<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}
 							>{loading ? 'Saving...' : 'Save'}</button
 						>
@@ -159,9 +184,16 @@
 				{/if}
 			</div>
 			<div class="grid gap-2 grid-cols-2 auto-rows-max mt-4">
-				<label for="name" class="text-base font-bold text-stone-100">{$t('forms.name')}</label>
-				<input class="w-full" name="name" id="name" required bind:value={source.name} />
-				<label for="htmlUrl" class="text-base font-bold text-stone-100">HTML URL</label>
+				<label for="name">{$t('forms.name')}</label>
+				<input
+					class="w-full"
+					name="name"
+					id="name"
+					required
+					bind:value={source.name}
+					disabled={$appSession.teamId !== '0'}
+				/>
+				<label for="htmlUrl">HTML URL</label>
 				<input
 					class="w-full"
 					name="htmlUrl"
@@ -171,7 +203,7 @@
 					required
 					bind:value={source.htmlUrl}
 				/>
-				<label for="apiUrl" class="text-base font-bold text-stone-100">API URL</label>
+				<label for="apiUrl">API URL</label>
 				<input
 					class="w-full"
 					name="apiUrl"
@@ -181,7 +213,7 @@
 					readonly={source.githubAppId}
 					bind:value={source.apiUrl}
 				/>
-				<label for="customPort" class="text-base font-bold text-stone-100"
+				<label for="customPort"
 					>Custom SSH Port <Explainer
 						explanation="If you use a self-hosted version of Git, you can provide custom port for all the Git related actions."
 					/></label
@@ -195,9 +227,7 @@
 					required
 					value={source.customPort}
 				/>
-				<label for="organization" class="pt-2 text-base font-bold text-stone-100"
-					>Organization</label
-				>
+				<label for="organization" class="pt-2">Organization</label>
 				<input
 					class="w-full"
 					readonly
@@ -207,6 +237,17 @@
 					placeholder="eg: coollabsio"
 					bind:value={source.organization}
 				/>
+				<Setting
+					customClass="pt-4"
+					isBeta={true}
+					id="autodeploy"
+					isCenter={false}
+					disabled={$appSession.teamId !== '0'}
+					bind:setting={source.isSystemWide}
+					on:click={() => changeSettings('isSystemWide', true)}
+					title="System Wide Git Source"
+					description="System Wide Git Sources are available to all the users in your Coolify instance. <br><br> <span class='font-bold text-warning'>Use with caution, as it can be a security risk.</span>"
+				/>
 			</div>
 		</form>
 	{:else}

apps/ui/src/routes/sources/[id]/__layout.svelte

@@ -53,7 +53,7 @@
 	}
 </script>
 
-{#if id !== 'new'}
+{#if id !== 'new' && $appSession.teamId === '0'}
 	<nav class="nav-side">
 		<button
 			id="delete"

apps/ui/src/tailwind.css

@@ -43,7 +43,7 @@ textarea {
 }
 
 #svelte .custom-select-wrapper .selectContainer {
-	@apply h-12 w-96 rounded 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 ;
+	@apply h-12 w-96 rounded 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 ;
 }
 
 #svelte .listContainer {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "coolify",
   "description": "An open-source & self-hostable Heroku / Netlify alternative.",
-  "version": "3.10.8",
+  "version": "3.10.10",
   "license": "Apache-2.0",
   "repository": "github:coollabsio/coolify",
   "scripts": {