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

Componentization of /servers and /sources

Browse Source
This commit is contained in:
Gabriel Engel
2022-11-23 08:17:03 -03:00
parent c2d72ad309
commit 91c558ec83
9 changed files with 228 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
apps/ui/src/routes/servers/index.svelte
View File

@@ -5,11 +5,10 @@
import type { Load } from '@sveltejs/kit';
export const load: Load = async ({}) => {
try {
const { servers } = await get('/servers');
const {servers} = await get('/servers');
const {destinations} = await get('/resources');
return {
props: {
servers
}
props: { servers, destinations }
};
} catch (error: any) {
return {
@@ -22,16 +21,25 @@
<script lang="ts">
export let servers: any;
export let destinations:any;
import { appSession } from '$lib/store';
import { goto } from '$app/navigation';
import ContextMenu from '$lib/components/ContextMenu.svelte';
import LocalDockerIcon from '$lib/components/svg/servers/LocalDockerIcon.svelte';
import RemoteDockerIcon from '$lib/components/svg/servers/RemoteDockerIcon.svelte';
import PublicBadge from '$lib/components/badges/PublicBadge.svelte';
import TeamsBadge from '$lib/components/badges/TeamsBadge.svelte';
import Grid3 from '$lib/components/grids/Grid3.svelte';
if ($appSession.teamId !== '0') {
goto('/');
}
</script>
<div class="header">
<h1 class="text-2xl font-bold">Servers</h1>
</div>
<ContextMenu>
<h1 class="title">Servers</h1>
</ContextMenu>
<div class="container lg:mx-auto lg:p-0 px-8 p-5">
{#if servers.length > 0}
<div class="grid grid-col gap-8 auto-cols-max grid-cols-1 p-4">
@@ -49,3 +57,45 @@
<h1 class="text-center text-xs">Nothing here.</h1>
{/if}
</div>
<div class="flex items-center mt-10">
<h1 class="title lg:text-3xl">Destinations</h1>
</div>
{#if destinations.length > 0}
<div class="divider" />
<Grid3>
{#if destinations.length > 0}
{#each destinations as destination}
<a class="no-underline mb-5" href={`/destinations/${destination.id}`}>
<div
class="w-full rounded p-5 bg-coolgray-200 hover:bg-destinations indicator duration-150"
>
<div class="w-full flex flex-row">
<div class="absolute top-0 left-0 -m-5 h-10 w-10">
<LocalDockerIcon/>
{#if destination.remoteEngine}
<RemoteDockerIcon/>
{/if}
</div>
<div class="w-full flex flex-col">
<h1 class="font-bold text-base truncate">{destination.name}</h1>
<div class="h-10 text-xs">
{#if $appSession.teamId === '0' && destination.remoteVerified === false && destination.remoteEngine}
<h2 class="text-red-500">Not verified yet</h2>
{/if}
{#if destination.remoteEngine && !destination.sshKeyId}
<h2 class="text-red-500">SSH key missing</h2>
{/if}
<TeamsBadge teams={destination.teams} thing={destination}/>
</div>
</div>
</div>
</div>
</a>
{/each}
{:else}
<h1 class="">Nothing here.</h1>
{/if}
</Grid3>
{/if}

58
apps/ui/src/routes/sources/index.svelte
View File

@@ -1,4 +1,56 @@
<script lang="ts">
import { goto } from '$app/navigation';
goto('/');
<script context="module" lang="ts">
import type { Load } from '@sveltejs/kit';
import {loadResources} from '$lib/resources';
export const load: Load = loadResources;
</script>
<script lang="ts">
export let gitSources:any;
import PublicBadge from "$lib/components/badges/PublicBadge.svelte";
import TeamsBadge from "$lib/components/badges/TeamsBadge.svelte";
import ContextMenu from "$lib/components/ContextMenu.svelte";
import Grid3 from "$lib/components/grids/Grid3.svelte";
import GithubIcon from "$lib/components/svg/sources/GithubIcon.svelte";
import GitlabIcon from "$lib/components/svg/sources/GitlabIcon.svelte";
</script>
<ContextMenu>
<div class="title">Git Sources</div>
</ContextMenu>
<Grid3>
{#if gitSources.length > 0}
{#each gitSources as source}
<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 flex">
{#if source?.type === 'gitlab'}
<GitlabIcon />
{:else if source?.type === 'github'}
<GithubIcon/>
{/if}
{#if source.isSystemWide}
<PublicBadge/>
{/if}
</div>
<div class="w-full flex flex-col">
<div class="h-10">
<h1 class="font-bold text-base truncate">{source.name}</h1>
<TeamsBadge teams={source.teams} thing={source}/>
</div>
<div class="flex justify-end items-end space-x-2 h-10" />
</div>
</div>
</div>
</a>
{/each}
{:else}
<h1 class="">Nothing here yet!</h1>
{/if}
</Grid3>