- Search in repositories (thanks to @SaraVieira).
- Custom Dockerfile - you be able to deploy ANY applications! 🎉 
- Basic repository scanner for Nextjs and React. It will setup the default commands and buildpack if it detects some defined parameters.
- UI/UX fixes:
  - Github loading screen instead of standard loading screen. 
  - Info tooltips which provide some explanations of the input fields.
This commit is contained in:
Andras Bacsai
2021-04-04 14:57:42 +02:00
committed by GitHub
parent 3af1fd4d1b
commit 69f050b864
27 changed files with 669 additions and 363 deletions

View File

@@ -9,26 +9,20 @@
</style>
<script>
import { url, goto, route, isActive, redirect } from "@roxi/routify/runtime";
import {
loggedIn,
session,
fetch,
deployments,
application,
initConf,
} from "@store";
import { goto, route, isActive } from "@roxi/routify/runtime";
import { loggedIn, session, fetch, deployments } from "@store";
import { toast } from "@zerodevx/svelte-toast";
import { onMount } from "svelte";
import compareVersions from 'compare-versions';
import compareVersions from "compare-versions";
import packageJson from "../../package.json";
import Tooltip from "../components/Tooltip/Tooltip.svelte";
let upgradeAvailable = false;
let upgradeDisabled = false;
let upgradeDone = false;
let latest = {};
onMount(async () => {
upgradeAvailable = await checkUpgrade();
if ($session.token) upgradeAvailable = await checkUpgrade();
});
async function verifyToken() {
if ($session.token) {
@@ -74,14 +68,20 @@
}
}
async function checkUpgrade() {
const branch = process.env.NODE_ENV === 'production' && window.location.hostname !== 'test.andrasbacsai.dev' ? 'main' : 'next'
const branch =
process.env.NODE_ENV === "production" &&
window.location.hostname !== "test.andrasbacsai.dev"
? "main"
: "next";
latest = await window
.fetch(
`https://raw.githubusercontent.com/coollabsio/coolify/${branch}/package.json`,
{ cache: "no-cache" },
)
.then(r => r.json());
return compareVersions(latest.version,packageJson.version) === 1 ? true : false
return compareVersions(latest.version, packageJson.version) === 1
? true
: false;
}
</script>
@@ -91,123 +91,128 @@
class="w-16 bg-warmGray-800 text-white top-0 left-0 fixed min-w-4rem min-h-screen"
>
<div
class="flex flex-col w-full h-screen items-center space-y-4 transition-all duration-100"
class="flex flex-col w-full h-screen items-center transition-all duration-100"
class:border-green-500="{$isActive('/dashboard/applications')}"
class:border-purple-500="{$isActive('/dashboard/databases')}"
>
<img class="w-10 pt-4 pb-4" src="/favicon.png" alt="coolLabs logo" />
<div
class="p-2 hover:bg-warmGray-700 rounded hover:text-green-500 my-4 transition-all duration-100 cursor-pointer"
on:click="{() => $goto('/dashboard/applications')}"
class:text-green-500="{$isActive('/dashboard/applications') ||
$isActive('/application')}"
class:bg-warmGray-700="{$isActive('/dashboard/applications') ||
$isActive('/application')}"
>
<svg
class="w-8"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect
x="9"
y="9"
width="6"
height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line
x1="15"
y1="1"
x2="15"
y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line
x1="15"
y1="20"
x2="15"
y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line
x1="20"
y1="14"
x2="23"
y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line
x1="1"
y1="14"
x2="4"
y2="14"></line></svg
<Tooltip position="right" label="Applications">
<div
class="p-2 hover:bg-warmGray-700 rounded hover:text-green-500 my-4 transition-all duration-100 cursor-pointer"
on:click="{() => $goto('/dashboard/applications')}"
class:text-green-500="{$isActive('/dashboard/applications') ||
$isActive('/application')}"
class:bg-warmGray-700="{$isActive('/dashboard/applications') ||
$isActive('/application')}"
>
</div>
<div
class="p-2 hover:bg-warmGray-700 rounded hover:text-purple-500 my-4 transition-all duration-100 cursor-pointer"
on:click="{() => $goto('/dashboard/databases')}"
class:text-purple-500="{$isActive('/dashboard/databases') ||
$isActive('/database')}"
class:bg-warmGray-700="{$isActive('/dashboard/databases') ||
$isActive('/database')}"
>
<svg
class="w-8"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
<svg
class="w-8"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
></path>
</svg>
</div>
><rect x="4" y="4" width="16" height="16" rx="2" ry="2"
></rect><rect x="9" y="9" width="6" height="6"></rect><line
x1="9"
y1="1"
x2="9"
y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line
x1="9"
y1="20"
x2="9"
y2="23"></line><line x1="15" y1="20" x2="15" y2="23"
></line><line x1="20" y1="9" x2="23" y2="9"></line><line
x1="20"
y1="14"
x2="23"
y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line
x1="1"
y1="14"
x2="4"
y2="14"></line></svg
>
</div>
</Tooltip>
<Tooltip position="right" label="Databases">
<div
class="p-2 hover:bg-warmGray-700 rounded hover:text-purple-500 transition-all duration-100 cursor-pointer"
on:click="{() => $goto('/dashboard/databases')}"
class:text-purple-500="{$isActive('/dashboard/databases') ||
$isActive('/database')}"
class:bg-warmGray-700="{$isActive('/dashboard/databases') ||
$isActive('/database')}"
>
<svg
class="w-8"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
></path>
</svg>
</div>
</Tooltip>
<div class="flex-1"></div>
<button
title="Settings"
class="p-2 hover:bg-warmGray-700 rounded hover:text-yellow-500 my-4 transition-all duration-100 cursor-pointer"
class:text-yellow-500="{$isActive('/settings')}"
class:bg-warmGray-700="{$isActive('/settings')}"
on:click="{() => $goto('/settings')}"
>
<svg
class="w-8"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
<Tooltip position="right" label="Settings">
<button
class="p-2 hover:bg-warmGray-700 rounded hover:text-yellow-500 transition-all duration-100 cursor-pointer"
class:text-yellow-500="{$isActive('/settings')}"
class:bg-warmGray-700="{$isActive('/settings')}"
on:click="{() => $goto('/settings')}"
>
<path
<svg
class="w-8"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</button>
</Tooltip>
<Tooltip position="right" label="Logout">
<button
class="p-2 hover:bg-warmGray-700 rounded hover:text-red-500 my-4 transition-all duration-100 cursor-pointer"
on:click="{logout}"
>
<svg
class="w-7"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</button>
<button
class="p-2 hover:bg-warmGray-700 rounded hover:text-red-500 my-4 transition-all duration-100 cursor-pointer"
on:click="{logout}"
>
<svg
class="w-7"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline
points="16 17 21 12 16 7"></polyline><line
x1="21"
y1="12"
x2="9"
y2="12"></line></svg
>
</button>
><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"
></path><polyline points="16 17 21 12 16 7"></polyline><line
x1="21"
y1="12"
x2="9"
y2="12"></line></svg
>
</button>
</Tooltip>
<div
class="cursor-pointer text-xs font-bold text-warmGray-400 py-2 hover:bg-warmGray-700 w-full text-center"
>
@@ -223,32 +228,32 @@
<div class="flex items-center">
<div></div>
<div class="flex-1"></div>
{#if !upgradeDisabled}
<button
class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-xs font-bold rounded px-2 py-2"
disabled="{upgradeDisabled}"
on:click="{upgrade}"
>New version available, <br>click here to upgrade!</button
>
{:else if upgradeDone}
<button
use:reloadInAMin
class="font-bold text-xs rounded px-2 cursor-not-allowed"
disabled="{upgradeDisabled}"
>Upgrade done. 🎉 Automatically reloading in 30s.</button
>
{:else}
<button
class="opacity-50 tracking-tight font-bold text-xs rounded px-2 cursor-not-allowed"
disabled="{upgradeDisabled}">Upgrading. It could take a while, please wait...</button
>
{/if}
{#if !upgradeDisabled}
<button
class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-xs font-bold rounded px-2 py-2"
disabled="{upgradeDisabled}"
on:click="{upgrade}"
>New version available, <br />click here to upgrade!</button
>
{:else if upgradeDone}
<button
use:reloadInAMin
class="font-bold text-xs rounded px-2 cursor-not-allowed"
disabled="{upgradeDisabled}"
>Upgrade done. 🎉 Automatically reloading in 30s.</button
>
{:else}
<button
class="opacity-50 tracking-tight font-bold text-xs rounded px-2 cursor-not-allowed"
disabled="{upgradeDisabled}"
>Upgrading. It could take a while, please wait...</button
>
{/if}
</div>
</footer>
{/if}
<main class:main={$route.path !== "/index"}>
<slot />
{/if}
<main class:main="{$route.path !== '/index'}">
<slot />
</main>
{:catch test}
{$goto("/index")}