diff --git a/apps/ui/src/lib/components/ContextMenu.svelte b/apps/ui/src/lib/components/ContextMenu.svelte new file mode 100644 index 000000000..8698e78bb --- /dev/null +++ b/apps/ui/src/lib/components/ContextMenu.svelte @@ -0,0 +1,4 @@ + diff --git a/apps/ui/src/lib/components/grids/Grid3.svelte b/apps/ui/src/lib/components/grids/Grid3.svelte new file mode 100644 index 000000000..70e50bc6a --- /dev/null +++ b/apps/ui/src/lib/components/grids/Grid3.svelte @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/apps/ui/src/lib/components/svg/servers/LocalDockerIcon.svelte b/apps/ui/src/lib/components/svg/servers/LocalDockerIcon.svelte new file mode 100644 index 000000000..f3ab3be56 --- /dev/null +++ b/apps/ui/src/lib/components/svg/servers/LocalDockerIcon.svelte @@ -0,0 +1,26 @@ + + + + + + + + + + + + + diff --git a/apps/ui/src/lib/components/svg/servers/RemoteDockerIcon.svelte b/apps/ui/src/lib/components/svg/servers/RemoteDockerIcon.svelte new file mode 100644 index 000000000..1d00a6900 --- /dev/null +++ b/apps/ui/src/lib/components/svg/servers/RemoteDockerIcon.svelte @@ -0,0 +1,16 @@ + + + + + + + diff --git a/apps/ui/src/lib/components/svg/sources/GithubIcon.svelte b/apps/ui/src/lib/components/svg/sources/GithubIcon.svelte new file mode 100644 index 000000000..b56210177 --- /dev/null +++ b/apps/ui/src/lib/components/svg/sources/GithubIcon.svelte @@ -0,0 +1,11 @@ + + + diff --git a/apps/ui/src/lib/components/svg/sources/GitlabIcon.svelte b/apps/ui/src/lib/components/svg/sources/GitlabIcon.svelte new file mode 100644 index 000000000..3e8c8a84c --- /dev/null +++ b/apps/ui/src/lib/components/svg/sources/GitlabIcon.svelte @@ -0,0 +1,21 @@ + + + diff --git a/apps/ui/src/routes/servers/index.svelte b/apps/ui/src/routes/servers/index.svelte index dc8844ff0..261ad18ff 100644 --- a/apps/ui/src/routes/servers/index.svelte +++ b/apps/ui/src/routes/servers/index.svelte @@ -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 @@ -
-

Servers

-
+ +

Servers

+ +
{#if servers.length > 0}
@@ -49,3 +57,45 @@

Nothing here.

{/if}
+ +
+

Destinations

+
+ +{#if destinations.length > 0} +
+ + {#if destinations.length > 0} + {#each destinations as destination} + +
+
+
+ + {#if destination.remoteEngine} + + {/if} +
+
+

{destination.name}

+
+ {#if $appSession.teamId === '0' && destination.remoteVerified === false && destination.remoteEngine} +

Not verified yet

+ {/if} + {#if destination.remoteEngine && !destination.sshKeyId} +

SSH key missing

+ {/if} + +
+
+
+
+ + {/each} + {:else} +

Nothing here.

+ {/if} + +{/if} diff --git a/apps/ui/src/routes/sources/index.svelte b/apps/ui/src/routes/sources/index.svelte index 8136f76e8..e49f63690 100644 --- a/apps/ui/src/routes/sources/index.svelte +++ b/apps/ui/src/routes/sources/index.svelte @@ -1,4 +1,56 @@ - + + + + + +
Git Sources
+ + + + + {#if gitSources.length > 0} + {#each gitSources as source} + +
+
+
+ {#if source?.type === 'gitlab'} + + {:else if source?.type === 'github'} + + {/if} + + {#if source.isSystemWide} + + {/if} +
+
+
+

{source.name}

+ +
+ +
+
+
+
+ + {/each} + {:else} +

Nothing here yet!

+ {/if} + + diff --git a/apps/ui/src/tailwind.css b/apps/ui/src/tailwind.css index 1aeb96abf..318177074 100644 --- a/apps/ui/src/tailwind.css +++ b/apps/ui/src/tailwind.css @@ -102,6 +102,40 @@ .content { .title { @apply text-lg lg:text-2xl font-bold; } +.subtitle{ + @apply text-lg lg:text-xl font-bold text-indigo-300; +} +.label{ + @apply text-sm leading-6 font-semibold text-sky-500 dark:text-sky-400; +} +.card{ + @apply border bg-coolgray-100 border-coolgray-200 rounded p-2 space-y-2 sticky top-4 mb-2 items-center +} +.icon-holder{ + overflow: hidden; + height: 30px; + border-radius: 5px; + margin-right: 8px; + background: linear-gradient(0deg, #999, #ddd); +} +.instance-status-running{ box-shadow: 1px 4px 5px #3df721; } +.instance-status-stopped{ box-shadow: 1px 4px 5px rgb(110, 191, 225); } +.instance-status-error{ box-shadow: 1px 4px 5px #fb00ff; } +.instance-status-degraded{ box-shadow: 1px 4px 5px #f7b121; } +.badge-status-healthy, +.badge-status-running { @apply text-green-500 } +.badge-status-degraded { @apply text-green-500 } +.badge-status-stopped { @apply text-sky-500 } +.delete-button{ @apply bg-red-600 } +.delete-button:hover{ @apply bg-red-500} +/* Interchange menu position */ +.menu-left { display: flex; flex-direction: row; } +.menu-left .menu-bar{ display: flex; flex-direction: column;} +.menu-left .menu-bar > * {display: flex; flex-direction: column;} +.menu-top { display: flex; flex-direction: column; } +.menu-top .menu-bar{ display: flex; flex-direction: row;} +.menu-top .menu-bar > * {display: flex; flex-direction: row;} + .nav-main { @apply fixed top-0 left-0 min-h-screen w-16 min-w-[4rem] overflow-hidden border-r border-stone-800 bg-coolgray-200 scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200 xl:overflow-visible; } @@ -210,4 +244,4 @@ .burger { .bg-coollabs-gradient { @apply bg-gradient-to-r from-purple-500 via-pink-500 to-red-500; -} \ No newline at end of file +}