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

feat: refresh resource status on dashboard

Browse Source
This commit is contained in:
Andras Bacsai 2022-09-22 09:47:25 +02:00
parent 657b97f190
commit be507be3a9
1 changed files with 74 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
apps/ui/src/routes/index.svelte
View File

@ -31,7 +31,7 @@
import { get } from '$lib/api'; import { get } from '$lib/api';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
import { asyncSleep, getRndInteger } from '$lib/common'; import { asyncSleep, getRndInteger } from '$lib/common';
import { appSession, search, addToast} from '$lib/store'; import { appSession, search } from '$lib/store';
import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte'; import ApplicationsIcons from '$lib/components/svg/applications/ApplicationIcons.svelte';
import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte'; import DatabaseIcons from '$lib/components/svg/databases/DatabaseIcons.svelte';
@ -42,6 +42,25 @@
let numberOfGetStatus = 0; let numberOfGetStatus = 0;
let status: any = {}; let status: any = {};
doSearch(); doSearch();
async function refreshStatusApplications() {
numberOfGetStatus = 0;
for (const application of applications) {
getStatus(application, true);
}
}
async function refreshStatusServices() {
numberOfGetStatus = 0;
for (const service of services) {
getStatus(service, true);
}
}
async function refreshStatusDatabases() {
numberOfGetStatus = 0;
for (const database of databases) {
getStatus(database, true);
}
}
function setInitials(onlyOthers: boolean = false) { function setInitials(onlyOthers: boolean = false) {
return { return {
applications: applications:
@ -87,12 +106,17 @@
filtered.otherDestinations = []; filtered.otherDestinations = [];
} }
async function getStatus(resources: any, force: boolean = false) {
async function getStatus(resources: any) { const { id, buildPack, dualCerts, type } = resources;
const { id, buildPack, dualCerts } = resources; if (buildPack && applications.length > 10 && !force) {
if (status[id]) return status[id]; return;
}
if (type && services.length > 10 && !force) {
return;
}
if (status[id] && !force) return status[id];
while (numberOfGetStatus > 1) { while (numberOfGetStatus > 1) {
await asyncSleep(getRndInteger(100, 200)); await asyncSleep(getRndInteger(100, 500));
} }
try { try {
numberOfGetStatus++; numberOfGetStatus++;
@ -118,6 +142,7 @@
status[id] = 'error'; status[id] = 'error';
return 'error'; return 'error';
} finally { } finally {
status = { ...status };
numberOfGetStatus--; numberOfGetStatus--;
} }
} }
@ -275,7 +300,6 @@
filtered = setInitials(); filtered = setInitials();
} }
} }
</script> </script>
<nav class="header"> <nav class="header">
@ -375,7 +399,10 @@
{/if} {/if}
{#if (filtered.applications.length > 0 && applications.length > 0) || filtered.otherApplications.length > 0} {#if (filtered.applications.length > 0 && applications.length > 0) || filtered.otherApplications.length > 0}
<div class="flex items-center mt-10"> <div class="flex items-center mt-10">
<h1 class="title lg:text-3xl">Applications</h1> <h1 class="title lg:text-3xl pr-4">Applications</h1>
<button class="btn btn-sm btn-primary" on:click={refreshStatusApplications}
>Refresh Status</button
>
</div> </div>
{/if} {/if}
{#if filtered.applications.length > 0 && applications.length > 0} {#if filtered.applications.length > 0 && applications.length > 0}
@ -386,11 +413,13 @@
{#if filtered.applications.length > 0} {#if filtered.applications.length > 0}
{#each filtered.applications as application} {#each filtered.applications as application}
<a class="no-underline mb-5" href={`/applications/${application.id}`}> <a class="no-underline mb-5" href={`/applications/${application.id}`}>
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator"> <div
class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator duration-150"
>
{#await getStatus(application)} {#await getStatus(application)}
<span class="indicator-item badge bg-yellow-500 badge-sm" /> <span class="indicator-item badge bg-yellow-500 badge-sm" />
{:then status} {:then}
{#if status === 'running'} {#if status[application.id] === 'running'}
<span class="indicator-item badge bg-success badge-sm" /> <span class="indicator-item badge bg-success badge-sm" />
{:else} {:else}
<span class="indicator-item badge bg-error badge-sm" /> <span class="indicator-item badge bg-error badge-sm" />
@ -492,11 +521,11 @@
> >
{#each filtered.otherApplications as application} {#each filtered.otherApplications as application}
<a class="no-underline mb-5" href={`/applications/${application.id}`}> <a class="no-underline mb-5" href={`/applications/${application.id}`}>
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator"> <div class="w-full rounded p-5 bg-coolgray-200 hover:bg-green-600 indicator duration-150">
{#await getStatus(application)} {#await getStatus(application)}
<span class="indicator-item badge bg-yellow-500 badge-sm" /> <span class="indicator-item badge bg-yellow-500 badge-sm" />
{:then status} {:then}
{#if status === 'running'} {#if status[application.id] === 'running'}
<span class="indicator-item badge bg-success badge-sm" /> <span class="indicator-item badge bg-success badge-sm" />
{:else} {:else}
<span class="indicator-item badge bg-error badge-sm" /> <span class="indicator-item badge bg-error badge-sm" />
@ -580,7 +609,9 @@
{/if} {/if}
{#if (filtered.services.length > 0 && services.length > 0) || filtered.otherServices.length > 0} {#if (filtered.services.length > 0 && services.length > 0) || filtered.otherServices.length > 0}
<div class="flex items-center mt-10"> <div class="flex items-center mt-10">
<h1 class="title lg:text-3xl">Services</h1> <h1 class="title lg:text-3xl pr-4">Services</h1>
<button class="btn btn-sm btn-primary" on:click={refreshStatusServices}>Refresh Status</button
>
</div> </div>
{/if} {/if}
{#if filtered.services.length > 0 && services.length > 0} {#if filtered.services.length > 0 && services.length > 0}
@ -591,11 +622,13 @@
{#if filtered.services.length > 0} {#if filtered.services.length > 0}
{#each filtered.services as service} {#each filtered.services as service}
<a class="no-underline mb-5" href={`/services/${service.id}`}> <a class="no-underline mb-5" href={`/services/${service.id}`}>
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator"> <div
class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator duration-150"
>
{#await getStatus(service)} {#await getStatus(service)}
<span class="indicator-item badge bg-yellow-500 badge-sm" /> <span class="indicator-item badge bg-yellow-500 badge-sm" />
{:then status} {:then}
{#if status === 'running'} {#if status[service.id] === 'running'}
<span class="indicator-item badge bg-success badge-sm" /> <span class="indicator-item badge bg-success badge-sm" />
{:else} {:else}
<span class="indicator-item badge bg-error badge-sm" /> <span class="indicator-item badge bg-error badge-sm" />
@ -663,11 +696,11 @@
> >
{#each filtered.otherServices as service} {#each filtered.otherServices as service}
<a class="no-underline mb-5" href={`/services/${service.id}`}> <a class="no-underline mb-5" href={`/services/${service.id}`}>
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator"> <div class="w-full rounded p-5 bg-coolgray-200 hover:bg-pink-600 indicator duration-150">
{#await getStatus(service)} {#await getStatus(service)}
<span class="indicator-item badge bg-yellow-500 badge-sm" /> <span class="indicator-item badge bg-yellow-500 badge-sm" />
{:then status} {:then}
{#if status === 'running'} {#if status[service.id] === 'running'}
<span class="indicator-item badge bg-success badge-sm" /> <span class="indicator-item badge bg-success badge-sm" />
{:else} {:else}
<span class="indicator-item badge bg-error badge-sm" /> <span class="indicator-item badge bg-error badge-sm" />
@ -720,7 +753,10 @@
{/if} {/if}
{#if (filtered.databases.length > 0 && databases.length > 0) || filtered.otherDatabases.length > 0} {#if (filtered.databases.length > 0 && databases.length > 0) || filtered.otherDatabases.length > 0}
<div class="flex items-center mt-10"> <div class="flex items-center mt-10">
<h1 class="title lg:text-3xl">Databases</h1> <h1 class="title lg:text-3xl pr-4">Databases</h1>
<button class="btn btn-sm btn-primary" on:click={refreshStatusDatabases}
>Refresh Status</button
>
</div> </div>
{/if} {/if}
{#if filtered.databases.length > 0 && databases.length > 0} {#if filtered.databases.length > 0 && databases.length > 0}
@ -731,11 +767,13 @@
{#if filtered.databases.length > 0} {#if filtered.databases.length > 0}
{#each filtered.databases as database} {#each filtered.databases as database}
<a class="no-underline mb-5" href={`/databases/${database.id}`}> <a class="no-underline mb-5" href={`/databases/${database.id}`}>
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-databases indicator"> <div
class="w-full rounded p-5 bg-coolgray-200 hover:bg-databases indicator duration-150"
>
{#await getStatus(database)} {#await getStatus(database)}
<span class="indicator-item badge bg-yellow-500 badge-sm" /> <span class="indicator-item badge bg-yellow-500 badge-sm" />
{:then status} {:then}
{#if status === 'running'} {#if status[database.id] === 'running'}
<span class="indicator-item badge bg-success badge-sm" /> <span class="indicator-item badge bg-success badge-sm" />
{:else} {:else}
<span class="indicator-item badge bg-error badge-sm" /> <span class="indicator-item badge bg-error badge-sm" />
@ -807,11 +845,11 @@
> >
{#each filtered.otherDatabases as database} {#each filtered.otherDatabases as database}
<a class="no-underline mb-5" href={`/databases/${database.id}`}> <a class="no-underline mb-5" href={`/databases/${database.id}`}>
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-databases indicator"> <div class="w-full rounded p-5 bg-coolgray-200 hover:bg-databases indicator duration-150">
{#await getStatus(database)} {#await getStatus(database)}
<span class="indicator-item badge bg-yellow-500 badge-sm" /> <span class="indicator-item badge bg-yellow-500 badge-sm" />
{:then status} {:then}
{#if status === 'running'} {#if status[database.id] === 'running'}
<span class="indicator-item badge bg-success badge-sm" /> <span class="indicator-item badge bg-success badge-sm" />
{:else} {:else}
<span class="indicator-item badge bg-error badge-sm" /> <span class="indicator-item badge bg-error badge-sm" />
@ -879,7 +917,7 @@
{#if filtered.gitSources.length > 0} {#if filtered.gitSources.length > 0}
{#each filtered.gitSources as source} {#each filtered.gitSources as source}
<a class="no-underline mb-5" href={`/sources/${source.id}`}> <a class="no-underline mb-5" href={`/sources/${source.id}`}>
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-sources indicator"> <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="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">
{#if source?.type === 'gitlab'} {#if source?.type === 'gitlab'}
@ -951,7 +989,7 @@
> >
{#each filtered.otherGitSources as source} {#each filtered.otherGitSources as source}
<a class="no-underline mb-5" href={`/sources/${source.id}`}> <a class="no-underline mb-5" href={`/sources/${source.id}`}>
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-sources indicator"> <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="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">
{#if source?.type === 'gitlab'} {#if source?.type === 'gitlab'}
@ -1018,7 +1056,9 @@
{#if filtered.destinations.length > 0} {#if filtered.destinations.length > 0}
{#each filtered.destinations as destination} {#each filtered.destinations as destination}
<a class="no-underline mb-5" href={`/destinations/${destination.id}`}> <a class="no-underline mb-5" href={`/destinations/${destination.id}`}>
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-destinations indicator"> <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="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">
<svg <svg
@ -1100,7 +1140,9 @@
> >
{#each filtered.otherDestinations as destination} {#each filtered.otherDestinations as destination}
<a class="no-underline mb-5" href={`/destinations/${destination.id}`}> <a class="no-underline mb-5" href={`/destinations/${destination.id}`}>
<div class="w-full rounded p-5 bg-coolgray-200 hover:bg-destinations indicator"> <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="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">
<svg <svg