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

ui: fixes

Browse Source
This commit is contained in:
Andras Bacsai
2022-08-10 08:54:26 +00:00
parent a19803e08a
commit 91d135bff8
43 changed files with 559 additions and 893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
TODO.md
View File

@@ -1,10 +1,3 @@
- Destination/new is not working? - Destination/new is not working?
- Check GitLab new repo - Check GitLab new repo
- Services new empty secret errors
- Services new empty storage errors
- New SSH key modal redesign
- Change license every package.json
- Login page redesign
- Registration redesign
- Global Settings -> Remove domain redesign
- Color hover on buttons - Color hover on buttons

36
apps/api/package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "api", "name": "api",
"description": "Coolify's Fastify API", "description": "Coolify's Fastify API",
"license": "AGPL-3.0", "license": "Apache-2.0",
"scripts": { "scripts": {
"db:push": "prisma db push && prisma generate", "db:push": "prisma db push && prisma generate",
"db:seed": "prisma db seed", "db:seed": "prisma db seed",
@@ -15,54 +15,54 @@
}, },
"dependencies": { "dependencies": {
"@breejs/ts-worker": "2.0.0", "@breejs/ts-worker": "2.0.0",
"@fastify/autoload": "5.1.0", "@fastify/autoload": "5.2.0",
"@fastify/cookie": "7.3.1", "@fastify/cookie": "7.3.1",
"@fastify/cors": "8.0.0", "@fastify/cors": "8.1.0",
"@fastify/env": "4.0.0", "@fastify/env": "4.1.0",
"@fastify/jwt": "6.3.1", "@fastify/jwt": "6.3.2",
"@fastify/static": "6.4.1", "@fastify/static": "6.5.0",
"@iarna/toml": "2.2.5", "@iarna/toml": "2.2.5",
"@prisma/client": "3.15.2", "@prisma/client": "3.15.2",
"axios": "0.27.2", "axios": "0.27.2",
"bcryptjs": "2.4.3", "bcryptjs": "2.4.3",
"bree": "9.1.1", "bree": "9.1.2",
"cabin": "9.1.2", "cabin": "9.1.2",
"compare-versions": "4.1.3", "compare-versions": "4.1.3",
"cuid": "2.1.8", "cuid": "2.1.8",
"dayjs": "1.11.4", "dayjs": "1.11.4",
"dockerode": "3.3.2", "dockerode": "3.3.3",
"dotenv-extended": "2.9.0", "dotenv-extended": "2.9.0",
"fastify": "4.3.0", "fastify": "4.4.0",
"fastify-plugin": "4.0.0", "fastify-plugin": "4.1.0",
"generate-password": "1.7.0", "generate-password": "1.7.0",
"get-port": "6.1.2", "get-port": "6.1.2",
"got": "12.2.0", "got": "12.3.1",
"is-ip": "5.0.0", "is-ip": "5.0.0",
"is-port-reachable": "4.0.0", "is-port-reachable": "4.0.0",
"js-yaml": "4.1.0", "js-yaml": "4.1.0",
"jsonwebtoken": "8.5.1", "jsonwebtoken": "8.5.1",
"node-forge": "1.3.1", "node-forge": "1.3.1",
"node-os-utils": "1.3.7", "node-os-utils": "1.3.7",
"p-queue": "7.2.0", "p-queue": "7.3.0",
"public-ip": "6.0.1", "public-ip": "6.0.1",
"ssh-config": "4.1.6", "ssh-config": "4.1.6",
"strip-ansi": "7.0.1", "strip-ansi": "7.0.1",
"unique-names-generator": "4.7.1" "unique-names-generator": "4.7.1"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "18.6.1", "@types/node": "18.6.5",
"@types/node-os-utils": "1.3.0", "@types/node-os-utils": "1.3.0",
"@typescript-eslint/eslint-plugin": "5.31.0", "@typescript-eslint/eslint-plugin": "5.33.0",
"@typescript-eslint/parser": "5.31.0", "@typescript-eslint/parser": "5.33.0",
"esbuild": "0.14.50", "esbuild": "0.15.0",
"eslint": "8.20.0", "eslint": "8.21.0",
"eslint-config-prettier": "8.5.0", "eslint-config-prettier": "8.5.0",
"eslint-plugin-prettier": "4.2.1", "eslint-plugin-prettier": "4.2.1",
"nodemon": "2.0.19", "nodemon": "2.0.19",
"prettier": "2.7.1", "prettier": "2.7.1",
"prisma": "3.15.2", "prisma": "3.15.2",
"rimraf": "3.0.2", "rimraf": "3.0.2",
"tsconfig-paths": "4.0.0", "tsconfig-paths": "4.1.0",
"typescript": "4.7.4" "typescript": "4.7.4"
}, },
"prisma": { "prisma": {

24
apps/ui/package.json
View File

@@ -1,13 +1,12 @@
{ {
"name": "ui", "name": "ui",
"description": "Coolify's SvelteKit UI", "description": "Coolify's SvelteKit UI",
"license": "AGPL-3.0", "license": "Apache-2.0",
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"build": "vite build", "build": "vite build",
"package": "svelte-kit package", "package": "svelte-kit package",
"preview": "svelte-kit preview", "preview": "svelte-kit preview",
"prepare": "svelte-kit sync",
"test": "playwright test", "test": "playwright test",
"check": "svelte-check --tsconfig ./tsconfig.json", "check": "svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
@@ -15,31 +14,30 @@
"format": "prettier --write --plugin-search-dir=. ." "format": "prettier --write --plugin-search-dir=. ."
}, },
"devDependencies": { "devDependencies": {
"@playwright/test": "1.23.4", "@playwright/test": "1.24.2",
"@sveltejs/kit": "1.0.0-next.377", "@sveltejs/kit": "1.0.0-next.405",
"@types/js-cookie": "3.0.2", "@types/js-cookie": "3.0.2",
"@typescript-eslint/eslint-plugin": "5.30.6", "@typescript-eslint/eslint-plugin": "5.33.0",
"@typescript-eslint/parser": "5.30.6", "@typescript-eslint/parser": "5.33.0",
"autoprefixer": "10.4.7", "autoprefixer": "10.4.8",
"eslint": "8.20.0", "eslint": "8.21.0",
"eslint-config-prettier": "8.5.0", "eslint-config-prettier": "8.5.0",
"eslint-plugin-svelte3": "4.0.0", "eslint-plugin-svelte3": "4.0.0",
"postcss": "8.4.14", "postcss": "8.4.16",
"prettier": "2.7.1", "prettier": "2.7.1",
"prettier-plugin-svelte": "2.7.0", "prettier-plugin-svelte": "2.7.0",
"svelte": "3.49.0", "svelte": "3.49.0",
"svelte-check": "2.8.0", "svelte-check": "2.8.0",
"svelte-preprocess": "4.10.7", "svelte-preprocess": "4.10.7",
"tailwindcss": "3.1.6", "tailwindcss": "3.1.8",
"tailwindcss-scrollbar": "0.1.0", "tailwindcss-scrollbar": "0.1.0",
"tslib": "2.4.0", "tslib": "2.4.0",
"typescript": "4.7.4", "typescript": "4.7.4",
"vite": "3.0.1" "vite": "3.0.5"
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@sveltejs/adapter-static": "1.0.0-next.37", "@sveltejs/adapter-static": "1.0.0-next.39",
"@zerodevx/svelte-toast": "0.7.2",
"cuid": "2.1.8", "cuid": "2.1.8",
"daisyui": "2.22.0", "daisyui": "2.22.0",
"js-cookie": "3.0.1", "js-cookie": "3.0.1",

7
apps/ui/src/lib/components/CopyPasswordField.svelte
View File

@@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/env'; import { browser } from '$app/env';
import { addToast } from '$lib/store'; import { addToast } from '$lib/store';
import { toast } from '@zerodevx/svelte-toast';
let showPassword = false; let showPassword = false;
export let value: string; export let value: string;
@@ -10,7 +9,7 @@ import { addToast } from '$lib/store';
export let readonly = false; export let readonly = false;
export let textarea = false; export let textarea = false;
export let required = false; export let required = false;
export let pattern: string|null|undefined = null; export let pattern: string | null | undefined = null;
export let id: string; export let id: string;
export let name: string; export let name: string;
export let placeholder = ''; export let placeholder = '';
@@ -23,7 +22,7 @@ import { addToast } from '$lib/store';
navigator.clipboard.writeText(value); navigator.clipboard.writeText(value);
addToast({ addToast({
message: 'Copied to clipboard.', message: 'Copied to clipboard.',
type: 'success', type: 'success'
}); });
} }
} }

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

@@ -17,9 +17,10 @@
</div> </div>
</div> </div>
<div <div
class:tooltip-right={dataTooltip}
class:tooltip={dataTooltip} class:tooltip={dataTooltip}
class:text-center={isCenter} class:text-center={isCenter}
data-tooltip={dataTooltip} data-tip={dataTooltip}
class="flex justify-center" class="flex justify-center"
> >
<div <div

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

@@ -8,7 +8,7 @@
class:alert-error={type === 'error'} class:alert-error={type === 'error'}
class:alert-info={type === 'info'} class:alert-info={type === 'info'}
> >
{#if type === 'success'} <!-- {#if type === 'success'}
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="stroke-current flex-shrink-0 h-6 w-6" class="stroke-current flex-shrink-0 h-6 w-6"
@@ -47,6 +47,6 @@
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/></svg /></svg
> >
{/if} {/if} -->
<slot /> <slot />
</div> </div>

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

@@ -2,7 +2,6 @@
import { dev } from '$app/env'; import { dev } from '$app/env';
import { get, post } from '$lib/api'; import { get, post } from '$lib/api';
import { addToast, appSession, features } from '$lib/store'; import { addToast, appSession, features } from '$lib/store';
import { toast } from '@zerodevx/svelte-toast';
import { asyncSleep, errorNotification } from '$lib/common'; import { asyncSleep, errorNotification } from '$lib/common';
import { onMount } from 'svelte'; import { onMount } from 'svelte';

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

@@ -78,7 +78,6 @@
import '../tailwind.css'; import '../tailwind.css';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { SvelteToast } from '@zerodevx/svelte-toast';
import { navigating, page } from '$app/stores'; import { navigating, page } from '$app/stores';
import { get } from '$lib/api'; import { get } from '$lib/api';
@@ -112,7 +111,6 @@
{/if} {/if}
</svelte:head> </svelte:head>
<Toasts /> <Toasts />
<!-- <SvelteToast options={{ intro: { y: -64 }, duration: 3000, pausable: true }} /> -->
{#if $navigating} {#if $navigating}
<div out:fade={{ delay: 100 }}> <div out:fade={{ delay: 100 }}>
<PageLoader /> <PageLoader />
@@ -128,10 +126,10 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/" href="/"
class="icons tooltip-right bg-coolgray-200 hover:text-white" class="icons tooltip tooltip-right bg-coolgray-200 hover:text-white"
class:text-white={$page.url.pathname === '/'} class:text-white={$page.url.pathname === '/'}
class:bg-coolgray-500={$page.url.pathname === '/'} class:bg-coolgray-500={$page.url.pathname === '/'}
data-tooltip="Dashboard" data-tip="Dashboard"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -155,12 +153,12 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/applications" href="/applications"
class="icons tooltip-green-500 tooltip-right bg-coolgray-200 hover:text-green-500" class="icons tooltip tooltip-right bg-coolgray-200"
class:text-green-500={$page.url.pathname.startsWith('/applications') || class:text-applications={$page.url.pathname.startsWith('/applications') ||
$page.url.pathname.startsWith('/new/application')} $page.url.pathname.startsWith('/new/application')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') || class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
$page.url.pathname.startsWith('/new/application')} $page.url.pathname.startsWith('/new/application')}
data-tooltip="Applications" data-tip="Applications"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -183,12 +181,12 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/sources" href="/sources"
class="icons tooltip-orange-500 tooltip-right bg-coolgray-200 hover:text-orange-500" class="icons tooltip tooltip-right bg-coolgray-200"
class:text-orange-500={$page.url.pathname.startsWith('/sources') || class:text-sources={$page.url.pathname.startsWith('/sources') ||
$page.url.pathname.startsWith('/new/source')} $page.url.pathname.startsWith('/new/source')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') || class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
$page.url.pathname.startsWith('/new/source')} $page.url.pathname.startsWith('/new/source')}
data-tooltip="Git Sources" data-tip="Git Sources"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -212,12 +210,12 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/destinations" href="/destinations"
class="icons tooltip-sky-500 tooltip-right bg-coolgray-200 hover:text-sky-500" class="icons tooltip tooltip-right bg-coolgray-200"
class:text-sky-500={$page.url.pathname.startsWith('/destinations') || class:text-destinations={$page.url.pathname.startsWith('/destinations') ||
$page.url.pathname.startsWith('/new/destination')} $page.url.pathname.startsWith('/new/destination')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') || class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
$page.url.pathname.startsWith('/new/destination')} $page.url.pathname.startsWith('/new/destination')}
data-tooltip="Destinations" data-tip="Destinations"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -247,12 +245,12 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/databases" href="/databases"
class="icons tooltip-purple-500 tooltip-right bg-coolgray-200 hover:text-purple-500" class="icons tooltip tooltip-right bg-coolgray-200"
class:text-purple-500={$page.url.pathname.startsWith('/databases') || class:text-databases={$page.url.pathname.startsWith('/databases') ||
$page.url.pathname.startsWith('/new/database')} $page.url.pathname.startsWith('/new/database')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') || class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
$page.url.pathname.startsWith('/new/database')} $page.url.pathname.startsWith('/new/database')}
data-tooltip="Databases" data-tip="Databases"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -273,12 +271,12 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/services" href="/services"
class="icons tooltip-pink-500 tooltip-right bg-coolgray-200 hover:text-pink-500" class="icons tooltip tooltip-right bg-coolgray-200"
class:text-pink-500={$page.url.pathname.startsWith('/services') || class:text-services={$page.url.pathname.startsWith('/services') ||
$page.url.pathname.startsWith('/new/service')} $page.url.pathname.startsWith('/new/service')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/services') || class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
$page.url.pathname.startsWith('/new/service')} $page.url.pathname.startsWith('/new/service')}
data-tooltip="Services" data-tip="Services"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -302,10 +300,10 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href="/iam" href="/iam"
class="icons tooltip-fuchsia-500 tooltip-right bg-coolgray-200 hover:text-fuchsia-500" class="icons tooltip tooltip-right bg-coolgray-200"
class:text-fuchsia-500={$page.url.pathname.startsWith('/iam')} class:text-iam={$page.url.pathname.startsWith('/iam')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')} class:bg-coolgray-500={$page.url.pathname.startsWith('/iam')}
data-tooltip="IAM" data-tip="IAM"
><svg ><svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8" class="h-8 w-8"
@@ -326,10 +324,10 @@
<a <a
sveltekit:prefetch sveltekit:prefetch
href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'} href={$appSession.teamId === '0' ? '/settings/global' : '/settings/ssh-keys'}
class="icons tooltip-yellow-500 tooltip-right bg-coolgray-200 hover:text-yellow-500" class="icons tooltip tooltip-right bg-coolgray-200"
class:text-yellow-500={$page.url.pathname.startsWith('/settings')} class:text-settings={$page.url.pathname.startsWith('/settings')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')} class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
data-tooltip="Settings" data-tip="Settings"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -350,8 +348,8 @@
</a> </a>
<div <div
class="icons tooltip-red-500 tooltip-right bg-coolgray-200 hover:text-red-500" class="icons tooltip tooltip-right bg-coolgray-200 hover:text-error"
data-tooltip="Logout" data-tip="Logout"
on:click={logout} on:click={logout}
> >
<svg <svg

1
apps/ui/src/routes/applications/[id]/_Secret.svelte
View File

@@ -93,7 +93,6 @@
bind:value={name} bind:value={name}
required required
placeholder="EXAMPLE_VARIABLE" placeholder="EXAMPLE_VARIABLE"
class=" border border-dashed border-coolgray-300"
readonly={!isNewSecret} readonly={!isNewSecret}
class:bg-transparent={!isNewSecret} class:bg-transparent={!isNewSecret}
class:cursor-not-allowed={!isNewSecret} class:cursor-not-allowed={!isNewSecret}

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

@@ -19,7 +19,7 @@
<div <div
class:tooltip={dataTooltip} class:tooltip={dataTooltip}
class:text-center={isCenter} class:text-center={isCenter}
data-tooltip={dataTooltip} data-tip={dataTooltip}
class="flex justify-center" class="flex justify-center"
> >
<div <div

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

@@ -8,7 +8,6 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { errorNotification } from '$lib/common'; import { errorNotification } from '$lib/common';
import { addToast } from '$lib/store'; import { addToast } from '$lib/store';
@@ -65,7 +64,6 @@
bind:value={storage.path} bind:value={storage.path}
required required
placeholder="eg: /sqlite.db" placeholder="eg: /sqlite.db"
class=" border border-dashed border-coolgray-300"
/> />
</td> </td>
<td> <td>

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

@@ -57,7 +57,6 @@
import DeleteIcon from '$lib/components/DeleteIcon.svelte'; import DeleteIcon from '$lib/components/DeleteIcon.svelte';
import { del, get, post } from '$lib/api'; import { del, get, post } from '$lib/api';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { toast } from '@zerodevx/svelte-toast';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { appSession, disabledButton, status, location, setLocation, addToast } from '$lib/store'; import { appSession, disabledButton, status, location, setLocation, addToast } from '$lib/store';
@@ -180,8 +179,8 @@
{#if $status.application.isExited} {#if $status.application.isExited}
<a <a
href={!$disabledButton ? `/applications/${id}/logs` : null} href={!$disabledButton ? `/applications/${id}/logs` : null}
class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500" class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-error"
data-tooltip="Application exited with an error!" data-tip="Application exited with an error!"
sveltekit:prefetch sveltekit:prefetch
> >
<svg <svg
@@ -232,8 +231,8 @@
title="Stop application" title="Stop application"
type="submit" type="submit"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500" class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-error"
data-tooltip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('application.stop_application') ? $t('application.stop_application')
: $t('application.permission_denied_stop_application')} : $t('application.permission_denied_stop_application')}
> >
@@ -258,8 +257,8 @@
type="submit" type="submit"
disabled={$disabledButton || !isQueueActive} disabled={$disabledButton || !isQueueActive}
class:hover:text-green-500={isQueueActive} class:hover:text-green-500={isQueueActive}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2" class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2"
data-tooltip={$appSession.isAdmin data-tip={$appSession.isAdmin
? isQueueActive ? isQueueActive
? 'Rebuild application' ? 'Rebuild application'
: 'Autoupdate inprogress. Cannot rebuild application.' : 'Autoupdate inprogress. Cannot rebuild application.'
@@ -289,8 +288,8 @@
title="Build and start application" title="Build and start application"
type="submit" type="submit"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500" class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-success"
data-tooltip={$appSession.isAdmin data-tip={$appSession.isAdmin
? 'Build and start application' ? 'Build and start application'
: 'You do not have permission to Build and start application.'} : 'You do not have permission to Build and start application.'}
> >
@@ -322,8 +321,8 @@
<button <button
title="Configurations" title="Configurations"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tooltip="Configurations" data-tip="Configurations"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -358,8 +357,8 @@
<button <button
title="Secret" title="Secret"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tooltip="Secret" data-tip="Secret"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -390,8 +389,8 @@
<button <button
title="Persistent Storages" title="Persistent Storages"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tooltip="Persistent Storages" data-tip="Persistent Storages"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -420,8 +419,8 @@
<button <button
title="Previews" title="Previews"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tooltip="Previews" data-tip="Previews"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -453,8 +452,8 @@
<button <button
title={$t('application.logs')} title={$t('application.logs')}
disabled={$disabledButton || !$status.application.isRunning} disabled={$disabledButton || !$status.application.isRunning}
class="icons bg-transparent tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tooltip={$t('application.logs')} data-tip={$t('application.logs')}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -485,8 +484,8 @@
<button <button
title="Build Logs" title="Build Logs"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tooltip="Build Logs" data-tip="Build Logs"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -518,8 +517,8 @@
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin} class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tooltip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('application.delete_application') ? $t('application.delete_application')
: $t('application.permission_denied_delete_application')} : $t('application.permission_denied_delete_application')}
> >

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

@@ -31,7 +31,6 @@
import Select from 'svelte-select'; import Select from 'svelte-select';
import Explainer from '$lib/components/Explainer.svelte'; import Explainer from '$lib/components/Explainer.svelte';
import { toast } from '@zerodevx/svelte-toast';
import { get, post } from '$lib/api'; import { get, post } from '$lib/api';
import cuid from 'cuid'; import cuid from 'cuid';
import { browser } from '$app/env'; import { browser } from '$app/env';
@@ -81,7 +80,7 @@
} }
]; ];
function containerClass() { function containerClass() {
return 'text-white border border-dashed border-coolgray-300 bg-transparent font-thin px-0'; return 'text-white bg-transparent font-thin px-0';
} }
async function getUsage() { async function getUsage() {

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

@@ -109,8 +109,8 @@
<div class="flex justify-end sticky top-0 p-1 mx-1"> <div class="flex justify-end sticky top-0 p-1 mx-1">
<button <button
on:click={followBuild} on:click={followBuild}
class="bg-transparent hover:text-green-500 hover:bg-coolgray-500" class="bg-transparent tooltip tooltip-bottom hover:text-green-500 hover:bg-coolgray-500"
data-tooltip="Follow logs" data-tip="Follow logs"
class:text-green-500={followingBuild} class:text-green-500={followingBuild}
> >
<svg <svg
@@ -134,8 +134,8 @@
<button <button
on:click={cancelBuild} on:click={cancelBuild}
class:animation-spin={cancelInprogress} class:animation-spin={cancelInprogress}
class="bg-transparent hover:text-red-500 hover:bg-coolgray-500" class="bg-transparent hover:text-red-500 hover:bg-coolgray-500 tooltip tooltip-bottom"
data-tooltip="Cancel build" data-tip="Cancel build"
> >
{#if cancelInprogress} {#if cancelInprogress}
Cancelling... Cancelling...

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

@@ -137,13 +137,13 @@
<div class="top-4 md:sticky"> <div class="top-4 md:sticky">
{#each builds as build, index (build.id)} {#each builds as build, index (build.id)}
<div <div
data-tooltip={new Intl.DateTimeFormat('default', dateOptions).format( data-tip={new Intl.DateTimeFormat('default', dateOptions).format(
new Date(build.createdAt) new Date(build.createdAt)
) + `\n${build.status}`} ) + `\n${build.status}`}
on:click={() => loadBuild(build.id)} on:click={() => loadBuild(build.id)}
class:rounded-tr={index === 0} class:rounded-tr={index === 0}
class:rounded-br={index === builds.length - 1} class:rounded-br={index === builds.length - 1}
class="tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl " class="tooltip tooltip-top flex cursor-pointer items-center justify-center border-l-2 py-4 no-underline transition-all duration-100 hover:bg-coolgray-400 hover:shadow-xl"
class:bg-coolgray-400={buildId === build.id} class:bg-coolgray-400={buildId === build.id}
class:border-red-500={build.status === 'failed'} class:border-red-500={build.status === 'failed'}
class:border-green-500={build.status === 'success'} class:border-green-500={build.status === 'success'}

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

@@ -147,8 +147,8 @@
<div class="flex justify-end sticky top-0 p-1 mx-1"> <div class="flex justify-end sticky top-0 p-1 mx-1">
<button <button
on:click={followBuild} on:click={followBuild}
class="bg-transparent" class="bg-transparent tooltip tooltip-bottom"
data-tooltip="Follow logs" data-tip="Follow logs"
class:text-green-500={followingLogs} class:text-green-500={followingLogs}
> >
<svg <svg

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

@@ -22,13 +22,12 @@
import { get, post } from '$lib/api'; import { get, post } from '$lib/api';
import { page } from '$app/stores'; import { page } from '$app/stores';
import Explainer from '$lib/components/Explainer.svelte'; import Explainer from '$lib/components/Explainer.svelte';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { errorNotification, getDomain } from '$lib/common'; import { errorNotification, getDomain } from '$lib/common';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Loading from '$lib/components/Loading.svelte'; import Loading from '$lib/components/Loading.svelte';
import { addToast } from '$lib/store'; import { addToast } from '$lib/store';
const { id } = $page.params; const { id } = $page.params;
@@ -61,9 +60,9 @@ import { addToast } from '$lib/store';
branch: container.branch branch: container.branch
}); });
addToast({ addToast({
message: 'Deployment queued', message: 'Deployment queued',
type: 'success' type: 'success'
}); });
if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) { if ($page.url.pathname.startsWith(`/applications/${id}/logs/build`)) {
return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`); return window.location.assign(`/applications/${id}/logs/build?buildId=${buildId}`);
} else { } else {

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

@@ -27,8 +27,7 @@
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { get } from '$lib/api'; import { get } from '$lib/api';
import { saveSecret } from './utils'; import { saveSecret } from './utils';
import { toast } from '@zerodevx/svelte-toast'; import { addToast } from '$lib/store';
import { addToast } from '$lib/store';
const limit = pLimit(1); const limit = pLimit(1);
const { id } = $page.params; const { id } = $page.params;
@@ -61,9 +60,9 @@ import { addToast } from '$lib/store';
batchSecrets = ''; batchSecrets = '';
await refreshSecrets(); await refreshSecrets();
addToast({ addToast({
message: 'Secrets saved.', message: 'Secrets saved.',
type: 'success' type: 'success'
}); });
} }
</script> </script>
@@ -151,9 +150,6 @@ import { addToast } from '$lib/store';
<h2 class="title my-6 font-bold">Paste .env file</h2> <h2 class="title my-6 font-bold">Paste .env file</h2>
<form on:submit|preventDefault={getValues} class="mb-12 w-full"> <form on:submit|preventDefault={getValues} class="mb-12 w-full">
<textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" /> <textarea bind:value={batchSecrets} class="mb-2 min-h-[200px] w-full" />
<button <button class="btn btn-sm bg-applications" type="submit">Batch add secrets</button>
class="btn btn-sm bg-applications"
type="submit">Batch add secrets</button
>
</form> </form>
</div> </div>

1
apps/ui/src/routes/applications/[id]/utils.ts
View File

@@ -1,4 +1,3 @@
import { toast } from '@zerodevx/svelte-toast';
import { post } from '$lib/api'; import { post } from '$lib/api';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { errorNotification } from '$lib/common'; import { errorNotification } from '$lib/common';

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

@@ -13,7 +13,6 @@
import Redis from './_Redis.svelte'; import Redis from './_Redis.svelte';
import CouchDb from './_CouchDb.svelte'; import CouchDb from './_CouchDb.svelte';
import { post } from '$lib/api'; import { post } from '$lib/api';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { errorNotification } from '$lib/common'; import { errorNotification } from '$lib/common';
import { addToast, appSession, status } from '$lib/store'; import { addToast, appSession, status } from '$lib/store';

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

@@ -144,8 +144,8 @@
{#if $status.database.isExited} {#if $status.database.isExited}
<a <a
href={!$disabledButton ? `/databases/${id}/logs` : null} href={!$disabledButton ? `/databases/${id}/logs` : null}
class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500" class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-red-500 tooltip-error"
data-tooltip="Service exited with an error!" data-tip="Service exited with an error!"
sveltekit:prefetch sveltekit:prefetch
> >
<svg <svg
@@ -196,8 +196,8 @@
title={$t('database.stop_database')} title={$t('database.stop_database')}
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500" class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
data-tooltip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('database.stop_database') ? $t('database.stop_database')
: $t('database.permission_denied_stop_database')} : $t('database.permission_denied_stop_database')}
> >
@@ -222,8 +222,8 @@
title={$t('database.start_database')} title={$t('database.start_database')}
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500" class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
data-tooltip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('database.start_database') ? $t('database.start_database')
: $t('database.permission_denied_start_database')} : $t('database.permission_denied_start_database')}
><svg ><svg
@@ -252,8 +252,8 @@
> >
<button <button
title={$t('application.configurations')} title={$t('application.configurations')}
class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500" class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500"
data-tooltip={$t('application.configurations')} data-tip={$t('application.configurations')}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -289,8 +289,8 @@
<button <button
title={$t('database.logs')} title={$t('database.logs')}
disabled={!$status.database.isRunning} disabled={!$status.database.isRunning}
class="icons bg-transparent tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tooltip={$t('database.logs')} data-tip={$t('database.logs')}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -317,8 +317,8 @@
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin} class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tooltip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('database.delete_database') ? $t('database.delete_database')
: $t('database.permission_denied_delete_database')}><DeleteIcon /></button : $t('database.permission_denied_delete_database')}><DeleteIcon /></button
> >

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

@@ -130,8 +130,8 @@
<div class="flex justify-end sticky top-0 p-1 mx-1"> <div class="flex justify-end sticky top-0 p-1 mx-1">
<button <button
on:click={followBuild} on:click={followBuild}
class="bg-transparent" class="bg-transparent tooltip tooltip-bottom"
data-tooltip="Follow logs" data-tip="Follow logs"
class:text-green-500={followingLogs} class:text-green-500={followingLogs}
> >
<svg <svg

1
apps/ui/src/routes/destinations/[id]/_LocalDocker.svelte
View File

@@ -2,7 +2,6 @@
export let destination: any; export let destination: any;
export let settings: any; export let settings: any;
import { toast } from '@zerodevx/svelte-toast';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { get, post } from '$lib/api'; import { get, post } from '$lib/api';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte'; import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';

3
apps/ui/src/routes/destinations/[id]/_RemoteDocker.svelte
View File

@@ -2,8 +2,7 @@
export let destination: any; export let destination: any;
export let settings: any; export let settings: any;
import { toast } from '@zerodevx/svelte-toast'; import { page } from '$app/stores';
import { page, session } from '$app/stores';
import Setting from '$lib/components/Setting.svelte'; import Setting from '$lib/components/Setting.svelte';
import { get, post } from '$lib/api'; import { get, post } from '$lib/api';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte'; import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';

4
apps/ui/src/routes/destinations/[id]/__layout.svelte
View File

@@ -92,9 +92,9 @@
type="submit" type="submit"
disabled={!$appSession.isAdmin && isDestinationDeletable} disabled={!$appSession.isAdmin && isDestinationDeletable}
class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable} class:hover:text-red-500={$appSession.isAdmin && isDestinationDeletable}
class="icons tooltip-bottom bg-transparent text-sm" class="icons tooltip tooltip-bottom bg-transparent text-sm"
class:text-stone-600={!isDestinationDeletable} class:text-stone-600={!isDestinationDeletable}
data-tooltip={deletable()}><DeleteIcon /></button data-tip={deletable()}><DeleteIcon /></button
> >
</nav> </nav>
{/if} {/if}

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

@@ -24,9 +24,7 @@
export let ownTeams: any; export let ownTeams: any;
export let allTeams: any; export let allTeams: any;
import { page } from '$app/stores';
import { del, get, post } from '$lib/api'; import { del, get, post } from '$lib/api';
import { toast } from '@zerodevx/svelte-toast';
import { errorNotification } from '$lib/common'; import { errorNotification } from '$lib/common';
import { addToast, appSession } from '$lib/store'; import { addToast, appSession } from '$lib/store';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';

4
apps/ui/src/routes/iam/team/[id]/__layout.svelte
View File

@@ -53,8 +53,8 @@
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin} class:hover:text-red-500={$appSession.isAdmin}
class="icons tooltip-bottom bg-transparent text-sm" class="icons tooltip tooltip-bottom bg-transparent text-sm"
data-tooltip={$appSession.isAdmin data-tip={$appSession.isAdmin
? 'Delete Team' ? 'Delete Team'
: $t('destination.permission_denied_delete_destination')}><DeleteIcon /></button : $t('destination.permission_denied_delete_destination')}><DeleteIcon /></button
> >

7
apps/ui/src/routes/login.svelte
View File

@@ -82,16 +82,15 @@
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
class="hover:opacity-90 text-white" class="btn btn-sm"
class:bg-transparent={loading} class:loading={loading}
class:text-stone-600={loading}
class:bg-coollabs={!loading} class:bg-coollabs={!loading}
>{loading ? $t('login.authenticating') : $t('login.login')}</button >{loading ? $t('login.authenticating') : $t('login.login')}</button
> >
<button <button
on:click|preventDefault={gotoRegister} on:click|preventDefault={gotoRegister}
class="bg-transparent hover:bg-coolgray-300 text-white ">{$t('register.register')}</button class="btn btn-sm">{$t('register.register')}</button
> >
</div> </div>
</form> </form>

4
apps/ui/src/routes/register.svelte
View File

@@ -121,11 +121,11 @@
<div class="flex space-x-2 h-8 items-center justify-center pt-8"> <div class="flex space-x-2 h-8 items-center justify-center pt-8">
<button <button
type="submit" type="submit"
class="text-white" class="btn btn-sm"
disabled={loading} disabled={loading}
class:hover:bg-coollabs-100={!loading}
class:bg-transparent={loading} class:bg-transparent={loading}
class:bg-coollabs={!loading} class:bg-coollabs={!loading}
class:loading={loading}
>{loading ? $t('register.registering') : $t('register.register')}</button >{loading ? $t('register.registering') : $t('register.register')}</button
> >
</div> </div>

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

@@ -7,8 +7,7 @@
import { del, post } from '$lib/api'; import { del, post } from '$lib/api';
import { errorNotification } from '$lib/common'; import { errorNotification } from '$lib/common';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte'; import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import { addToast } from '$lib/store'; import { addToast } from '$lib/store';
import { toast } from '@zerodevx/svelte-toast';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@@ -26,8 +25,8 @@ import { addToast } from '$lib/store';
} }
} }
async function saveSecret(isNew = false) { async function saveSecret(isNew = false) {
if (!name) return errorNotification('Name is required.'); if (!name) return errorNotification({ message: 'Name is required.' });
if (!value) return errorNotification('Value is required.'); if (!value) return errorNotification({ message: 'Value is required.' });
try { try {
await post(`/services/${id}/secrets`, { await post(`/services/${id}/secrets`, {
name, name,
@@ -55,7 +54,6 @@ import { addToast } from '$lib/store';
bind:value={name} bind:value={name}
required required
placeholder="EXAMPLE_VARIABLE" placeholder="EXAMPLE_VARIABLE"
class=" border border-dashed border-coolgray-300"
readonly={!isNewSecret} readonly={!isNewSecret}
class:bg-transparent={!isNewSecret} class:bg-transparent={!isNewSecret}
class:cursor-not-allowed={!isNewSecret} class:cursor-not-allowed={!isNewSecret}

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

@@ -8,7 +8,6 @@
import { browser } from '$app/env'; import { browser } from '$app/env';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { toast } from '@zerodevx/svelte-toast';
import { get, post } from '$lib/api'; import { get, post } from '$lib/api';
import { errorNotification, getDomain } from '$lib/common'; import { errorNotification, getDomain } from '$lib/common';

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

@@ -8,7 +8,6 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { toast } from '@zerodevx/svelte-toast';
import { errorNotification } from '$lib/common'; import { errorNotification } from '$lib/common';
import { addToast } from '$lib/store'; import { addToast } from '$lib/store';
const { id } = $page.params; const { id } = $page.params;
@@ -16,7 +15,7 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
async function saveStorage(newStorage = false) { async function saveStorage(newStorage = false) {
try { try {
if (!storage.path) return errorNotification('Path is required.'); if (!storage.path) return errorNotification({message: "Path is required!"});
storage.path = storage.path.startsWith('/') ? storage.path : `/${storage.path}`; storage.path = storage.path.startsWith('/') ? storage.path : `/${storage.path}`;
storage.path = storage.path.endsWith('/') ? storage.path.slice(0, -1) : storage.path; storage.path = storage.path.endsWith('/') ? storage.path.slice(0, -1) : storage.path;
storage.path.replace(/\/\//g, '/'); storage.path.replace(/\/\//g, '/');
@@ -65,7 +64,6 @@
bind:value={storage.path} bind:value={storage.path}
required required
placeholder="eg: /data" placeholder="eg: /data"
class=" border border-dashed border-coolgray-300"
/> />
</form> </form>
</td> </td>

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

@@ -177,8 +177,8 @@
{#if $status.service.isExited} {#if $status.service.isExited}
<a <a
href={!$disabledButton ? `/services/${id}/logs` : null} href={!$disabledButton ? `/services/${id}/logs` : null}
class=" icons bg-transparent tooltip-bottom text-sm flex items-center text-red-500 tooltip-red-500" class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center text-red-500 tooltip-error"
data-tooltip="Service exited with an error!" data-tip="Service exited with an error!"
sveltekit:prefetch sveltekit:prefetch
> >
<svg <svg
@@ -229,8 +229,8 @@
title={$t('service.stop_service')} title={$t('service.stop_service')}
type="submit" type="submit"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-red-500" class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-red-500"
data-tooltip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('service.stop_service') ? $t('service.stop_service')
: $t('service.permission_denied_stop_service')} : $t('service.permission_denied_stop_service')}
> >
@@ -255,8 +255,8 @@
title={$t('service.start_service')} title={$t('service.start_service')}
type="submit" type="submit"
disabled={$disabledButton} disabled={$disabledButton}
class="icons bg-transparent tooltip-bottom text-sm flex items-center space-x-2 text-green-500" class="icons bg-transparent tooltip tooltip-bottom text-sm flex items-center space-x-2 text-green-500"
data-tooltip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('service.start_service') ? $t('service.start_service')
: $t('service.permission_denied_start_service')} : $t('service.permission_denied_start_service')}
><svg ><svg
@@ -286,8 +286,8 @@
> >
<button <button
title={$t('application.configurations')} title={$t('application.configurations')}
class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500" class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500"
data-tooltip={$t('application.configurations')} data-tip={$t('application.configurations')}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -321,8 +321,8 @@
> >
<button <button
title={$t('application.secret')} title={$t('application.secret')}
class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500" class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500"
data-tooltip={$t('application.secret')} data-tip={$t('application.secret')}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -352,8 +352,8 @@
> >
<button <button
title="Persistent Storage" title="Persistent Storage"
class="icons bg-transparent tooltip-bottom text-sm disabled:text-red-500" class="icons bg-transparent tooltip tooltip-bottom text-sm disabled:text-red-500"
data-tooltip="Persistent Storage" data-tip="Persistent Storage"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -383,8 +383,8 @@
<button <button
title={$t('service.logs')} title={$t('service.logs')}
disabled={!$status.service.isRunning} disabled={!$status.service.isRunning}
class="icons bg-transparent tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tooltip={$t('service.logs')} data-tip={$t('service.logs')}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -412,8 +412,8 @@
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin} class:hover:text-red-500={$appSession.isAdmin}
class="icons bg-transparent tooltip-bottom text-sm" class="icons bg-transparent tooltip tooltip-bottom text-sm"
data-tooltip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('service.delete_service') ? $t('service.delete_service')
: $t('service.permission_denied_delete_service')}><DeleteIcon /></button : $t('service.permission_denied_delete_service')}><DeleteIcon /></button
> >

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

@@ -127,8 +127,8 @@
<div class="flex justify-end sticky top-0 p-1 mx-1"> <div class="flex justify-end sticky top-0 p-1 mx-1">
<button <button
on:click={followBuild} on:click={followBuild}
class="bg-transparent" class="bg-transparent tooltip tooltip-bottom"
data-tooltip="Follow logs" data-tip="Follow logs"
class:text-green-500={followingLogs} class:text-green-500={followingLogs}
> >
<svg <svg

2
apps/ui/src/routes/settings/_Menu.svelte
View File

@@ -3,7 +3,7 @@
import { appSession } from '$lib/store'; import { appSession } from '$lib/store';
</script> </script>
<div class="flex flex-col pt-4 space-y-6 w-96 px-20"> <div class="flex flex-col pt-4 space-y-6 px-10">
{#if $appSession.teamId === '0'} {#if $appSession.teamId === '0'}
<a <a
href="/settings/global" href="/settings/global"

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

@@ -22,7 +22,6 @@
import Explainer from '$lib/components/Explainer.svelte'; import Explainer from '$lib/components/Explainer.svelte';
import { del, get, post } from '$lib/api'; import { del, get, post } from '$lib/api';
import { browser } from '$app/env'; import { browser } from '$app/env';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { addToast, appSession, features } from '$lib/store'; import { addToast, appSession, features } from '$lib/store';
import { errorNotification, getDomain } from '$lib/common'; import { errorNotification, getDomain } from '$lib/common';
@@ -111,7 +110,7 @@
message: 'Configuration saved.', message: 'Configuration saved.',
type: 'success' type: 'success'
}); });
} catch (error) { } catch (error: any) {
if (error.message?.startsWith($t('application.dns_not_set_partial_error'))) { if (error.message?.startsWith($t('application.dns_not_set_partial_error'))) {
forceSave = true; forceSave = true;
if (dualCerts) { if (dualCerts) {
@@ -136,7 +135,7 @@
try { try {
await get(`/settings/check?domain=${domain}`); await get(`/settings/check?domain=${domain}`);
addToast({ addToast({
message:'DNS configuration is valid.', message: 'DNS configuration is valid.',
type: 'success' type: 'success'
}); });
isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true); isWWW ? (isWWWDomainOK = true) : (isNonWWWDomainOK = true);
@@ -163,7 +162,7 @@
<div class="flex space-x-1 pb-6"> <div class="flex space-x-1 pb-6">
<div class="title font-bold">{$t('index.global_settings')}</div> <div class="title font-bold">{$t('index.global_settings')}</div>
<button <button
class="btn btn-sm bg-settings text-black" class="btn btn-sm bg-settings text-black"
type="submit" type="submit"
class:bg-orange-600={forceSave} class:bg-orange-600={forceSave}
class:hover:bg-orange-400={forceSave} class:hover:bg-orange-400={forceSave}
@@ -179,6 +178,7 @@
<button <button
on:click|preventDefault={removeFqdn} on:click|preventDefault={removeFqdn}
disabled={loading.remove} disabled={loading.remove}
class="btn btn-sm"
class:bg-red-600={!loading.remove} class:bg-red-600={!loading.remove}
class:hover:bg-red-500={!loading.remove} class:hover:bg-red-500={!loading.remove}
>{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button >{loading.remove ? $t('forms.removing') : $t('forms.remove_domain')}</button
@@ -210,13 +210,13 @@
<div class="flex-col space-y-2 pt-4 text-center"> <div class="flex-col space-y-2 pt-4 text-center">
{#if isNonWWWDomainOK} {#if isNonWWWDomainOK}
<button <button
class="bg-green-600 hover:bg-green-500" class="btn btn-sm bg-success"
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)} on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
>DNS settings for {nonWWWDomain} is OK, click to recheck.</button >DNS settings for {nonWWWDomain} is OK, click to recheck.</button
> >
{:else} {:else}
<button <button
class="bg-red-600 hover:bg-red-500" class="btn btn-sm bg-error"
on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)} on:click|preventDefault={() => isDNSValid(getDomain(nonWWWDomain), false)}
>DNS settings for {nonWWWDomain} is invalid, click to recheck.</button >DNS settings for {nonWWWDomain} is invalid, click to recheck.</button
> >
@@ -224,14 +224,14 @@
{#if dualCerts} {#if dualCerts}
{#if isWWWDomainOK} {#if isWWWDomainOK}
<button <button
class="bg-green-600 hover:bg-green-500" class="btn btn-sm bg-success"
on:click|preventDefault={() => on:click|preventDefault={() =>
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)} isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
>DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button >DNS settings for www.{nonWWWDomain} is OK, click to recheck.</button
> >
{:else} {:else}
<button <button
class="bg-red-600 hover:bg-red-500" class="btn btn-sm bg-error"
on:click|preventDefault={() => on:click|preventDefault={() =>
isDNSValid(getDomain(`www.${nonWWWDomain}`), true)} isDNSValid(getDomain(`www.${nonWWWDomain}`), true)}
>DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button >DNS settings for www.{nonWWWDomain} is invalid, click to recheck.</button

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

@@ -19,7 +19,6 @@
<script lang="ts"> <script lang="ts">
export let sshKeys: any; export let sshKeys: any;
import { del, post } from '$lib/api'; import { del, post } from '$lib/api';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { errorNotification } from '$lib/common'; import { errorNotification } from '$lib/common';
import Menu from './_Menu.svelte'; import Menu from './_Menu.svelte';
@@ -81,7 +80,9 @@
<div class="box-selection group relative"> <div class="box-selection group relative">
<div class="text-xl font-bold">{key.name}</div> <div class="text-xl font-bold">{key.name}</div>
<div class="py-3 text-stone-600">Added on {key.createdAt}</div> <div class="py-3 text-stone-600">Added on {key.createdAt}</div>
<button on:click={() => deleteSSHKey(key.id)} class="btn btn-sm bg-error">Delete</button> <button on:click={() => deleteSSHKey(key.id)} class="btn btn-sm bg-error"
>Delete</button
>
</div> </div>
{/each} {/each}
{/if} {/if}
@@ -139,8 +140,10 @@
</div> </div>
</div> </div>
<div class="mt-5 flex space-x-4 justify-end"> <div class="mt-5 flex space-x-4 justify-end">
<button type="submit" class="bg-green-600 hover:bg-green-500">Save</button> <button type="submit" class="btn btn-sm bg-success">Save</button>
<button on:click={() => (isModalActive = false)} type="button" class="">Cancel</button> <button on:click={() => (isModalActive = false)} type="button" class="btn btn-sm"
>Cancel</button
>
</div> </div>
</form> </form>
</div> </div>

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

@@ -4,7 +4,6 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import { getAPIUrl, getWebhookUrl, post } from '$lib/api'; import { getAPIUrl, getWebhookUrl, post } from '$lib/api';
import Explainer from '$lib/components/Explainer.svelte'; import Explainer from '$lib/components/Explainer.svelte';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { dashify, errorNotification, getDomain } from '$lib/common'; import { dashify, errorNotification, getDomain } from '$lib/common';
import { addToast, appSession } from '$lib/store'; import { addToast, appSession } from '$lib/store';

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

@@ -7,7 +7,6 @@
import { getAPIUrl, post } from '$lib/api'; import { getAPIUrl, post } from '$lib/api';
import { dev } from '$app/env'; import { dev } from '$app/env';
import CopyPasswordField from '$lib/components/CopyPasswordField.svelte'; import CopyPasswordField from '$lib/components/CopyPasswordField.svelte';
import { toast } from '@zerodevx/svelte-toast';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { errorNotification } from '$lib/common'; import { errorNotification } from '$lib/common';

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

@@ -60,8 +60,8 @@
type="submit" type="submit"
disabled={!$appSession.isAdmin} disabled={!$appSession.isAdmin}
class:hover:text-red-500={$appSession.isAdmin} class:hover:text-red-500={$appSession.isAdmin}
class="icons tooltip-bottom bg-transparent text-sm" class="icons tooltip tooltip-bottom bg-transparent text-sm"
data-tooltip={$appSession.isAdmin data-tip={$appSession.isAdmin
? $t('source.delete_git_source') ? $t('source.delete_git_source')
: $t('source.permission_denied')}><DeleteIcon /></button : $t('source.permission_denied')}><DeleteIcon /></button
> >

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

@@ -160,220 +160,11 @@ a {
); );
border-image-slice: 1; border-image-slice: 1;
} }
/**
* Tooltip Styles
*/
/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
position: relative;
cursor: pointer;
}
/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
visibility: visible;
opacity: 1;
}
/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
z-index: 1001;
border: 6px solid transparent;
background: transparent;
content: '';
}
/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 8px;
color: #fff;
content: attr(data-tooltip);
@apply min-w-[100px] rounded text-center font-normal;
}
/* Base colours for tooltips */
/* coollabs - default */
.tooltip:after,
[data-tooltip]:after {
@apply bg-coollabs;
}
/* Green 500 */
.tooltip-green-500:after {
@apply bg-green-500;
}
/* Orange 500 */
.tooltip-orange-500:after {
@apply bg-orange-500;
}
/* Sky 500 */
.tooltip-sky-500:after {
@apply bg-sky-500;
}
/* Purple 500 */
.tooltip-purple-500:after {
@apply bg-purple-500;
}
/* Pink 500 */
.tooltip-pink-500:after {
@apply bg-pink-500;
}
/* Fuchsia 500 */
.tooltip-fuchsia-500:after {
@apply bg-fuchsia-500;
}
/* Yellow 500 */
.tooltip-yellow-500:after {
@apply bg-yellow-500;
}
/* Red-500 */
.tooltip-red-500:after {
@apply bg-red-500;
}
/* Directions */
/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
bottom: 100%;
left: 50%;
}
/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
margin-left: -80px;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
transform: translateY(-12px);
}
/* Left */
.tooltip-left:before,
.tooltip-left:after {
right: 100%;
bottom: 50%;
left: auto;
}
.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
transform: translateX(-12px);
}
/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
top: 100%;
bottom: auto;
left: 50%;
}
.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
transform: translateY(12px);
}
/* Right */
.tooltip-right:before,
.tooltip-right:after {
bottom: 50%;
left: 100%;
}
.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
transform: translateX(12px);
}
/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
top: 12px;
}
/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
margin-left: 0;
margin-bottom: -16px;
}
.box-selection { .box-selection {
@apply min-w-[16rem] max-w-[24rem] justify-center rounded border-transparent bg-coolgray-200 p-6 hover:border-transparent hover:bg-coolgray-400; @apply min-w-[16rem] max-w-[24rem] justify-center rounded border-transparent bg-coolgray-200 p-6 hover:border-transparent hover:bg-coolgray-400;
} }
._toastBar {
@apply hidden !important;
}
._toastMsg {
@apply text-xs !important;
}
._toastBtn {
@apply text-xs !important;
}
._toastItem {
@apply bg-coollabs bg-opacity-80 !important;
}
.lds-heart { .lds-heart {
animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1); animation: lds-heart 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
} }
@@ -399,7 +190,7 @@ a {
} }
.sub-menu { .sub-menu {
@apply text-xl font-bold hover:bg-coolgray-500 rounded p-2 hover:text-white text-stone-200 cursor-pointer; @apply w-48 text-base font-bold hover:bg-coolgray-500 rounded p-2 hover:text-white text-stone-200 cursor-pointer;
} }
.sub-menu-active { .sub-menu-active {

2
package.json
View File

@@ -2,7 +2,7 @@
"name": "coolify", "name": "coolify",
"description": "An open-source & self-hostable Heroku / Netlify alternative.", "description": "An open-source & self-hostable Heroku / Netlify alternative.",
"version": "3.2.0", "version": "3.2.0",
"license": "AGPL-3.0", "license": "Apache-2.0",
"repository": "github:coollabsio/coolify", "repository": "github:coollabsio/coolify",
"scripts": { "scripts": {
"oc": "opencollective-setup", "oc": "opencollective-setup",

872
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff