Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

fix: ui

Browse Source
This commit is contained in:
Andras Bacsai 2022-11-29 13:00:44 +01:00
parent 028ee6d7b1
commit 876c81fad8
9 changed files with 89 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/ui/src/lib/components/ContextMenu.svelte
View File

@ -1,4 +1,4 @@
<nav class="header justify-between px-0 mb-5" style="border-bottom: 2px solid #666;"> <nav class="header justify-between px-2 mb-5 lg:px-10">
<slot /> <slot />
<slot name="actions"></slot> <slot name="actions" />
</nav> </nav>

16
apps/ui/src/lib/components/LocalePicker.svelte
View File

@ -1,11 +1,11 @@
<script> <script>
import { locale, locales } from '$lib/translations'; import { locale, locales } from '$lib/translations';
</script> </script>
<div > <div>
<select bind:value={$locale} class="w-14"> <select bind:value={$locale} class="w-14">
{#each $locales as l} {#each $locales as l}
<option value={l}>{l}</option> <option value={l}>{l}</option>
{/each} {/each}
</select> </select>
</div> </div>

23
apps/ui/src/lib/components/badges/DestinationBadge.svelte
View File

@ -1,15 +1,14 @@
<script> <script>
import Tooltip from "../Tooltip.svelte"; import Tooltip from '../Tooltip.svelte';
import {initials} from '$lib/common'; import { initials } from '$lib/common';
export let name; export let name;
export let thingId; export let thingId;
let id = 'destination' + thingId; let id = 'destination' + thingId;
</script> </script>
{#if (name||'').length > 0} {#if (name || '').length > 0}
<span class="badge rounded uppercase text-xs " id={id}> <span class="badge rounded uppercase text-xs " {id}>
{initials(name)} {initials(name)}
</span> </span>
<Tooltip triggeredBy="#{id}" placement="right">{name}</Tooltip> <Tooltip triggeredBy="#{id}" placement="right">{name}</Tooltip>
{/if} {/if}

36
apps/ui/src/lib/components/badges/PublicBadge.svelte
View File

@ -1,19 +1,19 @@
<div title="Public"> <div title="Public">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 " class="h-6 w-6 "
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
fill="none" fill="none"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" /> <circle cx="12" cy="12" r="9" />
<line x1="3.6" y1="9" x2="20.4" y2="9" /> <line x1="3.6" y1="9" x2="20.4" y2="9" />
<line x1="3.6" y1="15" x2="20.4" y2="15" /> <line x1="3.6" y1="15" x2="20.4" y2="15" />
<path d="M11.5 3a17 17 0 0 0 0 18" /> <path d="M11.5 3a17 17 0 0 0 0 18" />
<path d="M12.5 3a17 17 0 0 1 0 18" /> <path d="M12.5 3a17 17 0 0 1 0 18" />
</svg> </svg>
</div> </div>

37
apps/ui/src/lib/components/badges/StatusBadge.svelte
View File

@ -1,25 +1,26 @@
<script lang="ts"> <script lang="ts">
import {getStatus} from '$lib/container/status' import { getStatus } from '$lib/container/status';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
export let thing:any; export let thing: any;
let getting = getStatus(thing) let getting = getStatus(thing);
let refreshing:any; let refreshing: any;
let status:any; let status: any;
// AutoUpdates Status every 5 seconds // AutoUpdates Status every 5 seconds
onMount( ()=>{ onMount(() => {
refreshing = setInterval( () =>{ refreshing = setInterval(() => {
getStatus(thing).then( (r) => status = r ) getStatus(thing).then((r) => (status = r));
}, 5000) }, 5000);
}) });
onDestroy( () =>{ onDestroy(() => {
clearInterval(refreshing); clearInterval(refreshing);
}) });
</script> </script>
{#await getting} {#await getting}
<span class="badge badge-lg rounded uppercase">...</span> <span class="badge badge-lg rounded uppercase">...</span>
{:then status} {:then status}
<span class="badge badge-lg rounded uppercase badge-status-{status}"> <span class="badge badge-lg rounded uppercase badge-status-{status}">
{status} {status}
</span> </span>
{/await} {/await}

25
apps/ui/src/lib/components/badges/TeamsBadge.svelte
View File

@ -1,17 +1,16 @@
<script lang="ts"> <script lang="ts">
import Tooltip from "../Tooltip.svelte"; import Tooltip from '../Tooltip.svelte';
import {initials} from '$lib/common'; import { initials } from '$lib/common';
export let teams:any; export let teams: any;
export let thing:any; export let thing: any;
let id = 'teams' + thing.id; let id = 'teams' + thing.id;
</script> </script>
<span> <span>
🏢 {#each teams as team}
{#each teams as team} <a href={`/iam/teams/${team.id}`} {id} class="no-underline">
<a href={`/iam/teams/${team.id}`} {id} style="color: #99f8; text-decoration: none;"> Team: {initials(team.name)}
{initials(team.name)} </a>
</a> <Tooltip triggeredBy="#{id}" placement="right" color="bg-destinations">{team.name}</Tooltip>
<Tooltip triggeredBy="#{id}" placement="right" color="bg-sky-500/50">{team.name}</Tooltip> {/each}
{/each} </span>
</span>

8
apps/ui/src/lib/components/grids/Grid3.svelte
View File

@ -1,3 +1,5 @@
<div class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4" > <div
<slot/> class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:md:grid-cols-3 xl:grid-cols-4 p-4 lg:px-10"
</div> >
<slot />
</div>

20
apps/ui/src/lib/container/status.ts
View File

@ -11,7 +11,7 @@ export let containerStatus = writable({});
let PERMITED_STATUS = ['loading', 'running', 'healthy', 'building', 'degraded', 'stopped', 'error']; let PERMITED_STATUS = ['loading', 'running', 'healthy', 'building', 'degraded', 'stopped', 'error'];
// refreshStatus([{id}]) // refreshStatus([{id}])
export async function refreshStatus(list:Array<any>) { export async function refreshStatus(list: Array<any>) {
for (const item of list) { for (const item of list) {
setStatus(item.id, 'loading'); setStatus(item.id, 'loading');
getStatus(item, true); getStatus(item, true);
@ -32,7 +32,7 @@ export async function getStatus(resource: any, force: boolean = false) {
} else if (typeof dualCerts !== 'undefined') { // Service } else if (typeof dualCerts !== 'undefined') { // Service
const response = await get(`/services/${id}/status`); const response = await get(`/services/${id}/status`);
newStatus = parseServiceResponse(response); newStatus = parseServiceResponse(response);
} else if (typeof engine !== 'undefined'){ // Destination/Server } else if (typeof engine !== 'undefined') { // Destination/Server
const response = await get(`/destinations/${id}/status`); const response = await get(`/destinations/${id}/status`);
newStatus = response.isRunning ? 'running' : 'stopped'; newStatus = response.isRunning ? 'running' : 'stopped';
} else { // Database } else { // Database
@ -49,25 +49,25 @@ export async function getStatus(resource: any, force: boolean = false) {
} }
const setStatus = (thingId, newStatus) => { const setStatus = (thingId, newStatus) => {
if(!PERMITED_STATUS.includes(newStatus)) if (!PERMITED_STATUS.includes(newStatus))
throw(`Change to ${newStatus} is not permitted. Try: ${PERMITED_STATUS.join(', ')}`); throw (`Change to ${newStatus} is not permitted. Try: ${PERMITED_STATUS.join(', ')}`);
containerStatus.update(n => Object.assign(n, {thingId: newStatus})); containerStatus.update(n => Object.assign(n, { thingId: newStatus }));
}; };
// -- Response Parsing // -- Response Parsing
function parseApplicationsResponse(list:Array<any>){ function parseApplicationsResponse(list: Array<any>) {
if (list.length === 0) return 'stopped'; if (list.length === 0) return 'stopped';
if (list.length === 1) return list[0].status.isRunning ? 'running' : 'stopped'; if (list.length === 1) return list[0].status.isRunning ? 'running' : 'stopped';
return allWorking(list.map( (el:any) => el.status.isRunning )) return allWorking(list.map((el: any) => el.status.isRunning))
} }
function parseServiceResponse(response:any){ function parseServiceResponse(response: any) {
if (Object.keys(response).length === 0) return 'stopped'; if (Object.keys(response).length === 0) return 'stopped';
let list = Object.keys(response).map((el) => el.status.isRunning) let list = Object.keys(response).map((el) => el.status.isRunning)
return allWorking(list) ? 'running' : 'degraded' return allWorking(list) ? 'running' : 'degraded'
} }
function allWorking(list:Array<any>){ function allWorking(list: Array<any>) {
return list.reduce((acum:boolean,res:boolean) => acum && res) ? 'running' : 'degraded'; return list.reduce((acum: boolean, res: boolean) => acum && res) ? 'running' : 'degraded';
} }

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

@ -58,18 +58,17 @@
{/if} {/if}
</div> </div>
<div class="flex items-center mt-10"> <ContextMenu>
<h1 class="title lg:text-3xl">Destinations</h1> <h1 class="title lg:text-3xl">Destinations</h1>
</div> </ContextMenu>
{#if destinations.length > 0} {#if destinations.length > 0}
<div class="divider" />
<Grid3> <Grid3>
{#if destinations.length > 0} {#if destinations.length > 0}
{#each destinations as destination} {#each destinations as destination}
<a class="no-underline mb-5" href={`/destinations/${destination.id}`}> <a class="no-underline mb-5" href={`/destinations/${destination.id}`}>
<div <div
class="w-full rounded p-5 bg-coolgray-200 hover:bg-destinations indicator duration-150" class="w-full rounded p-5 bg-coolgray-200 indicator duration-150"
> >
<div class="w-full flex flex-row"> <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 h-10 w-10">