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

ui: dashboard updates

Browse Source
This commit is contained in:
Andras Bacsai
2022-09-08 10:30:13 +02:00
parent a1a973a873
commit 7350524456
2 changed files with 495 additions and 699 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -159,156 +159,6 @@
<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" /> <path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
</svg> </svg>
</a> </a>
<!--
<div class="border-t border-stone-700" />
<a
id="applications"
sveltekit:prefetch
href="/applications"
class="icons bg-coolgray-200"
class:text-applications={$page.url.pathname.startsWith('/applications') ||
$page.url.pathname.startsWith('/new/application')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
$page.url.pathname.startsWith('/new/application')}
data-tip="Applications"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-9 w-9"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentcolor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="4" y="4" width="6" height="6" rx="1" />
<rect x="4" y="14" width="6" height="6" rx="1" />
<rect x="14" y="14" width="6" height="6" rx="1" />
<line x1="14" y1="7" x2="20" y2="7" />
<line x1="17" y1="4" x2="17" y2="10" />
</svg>
</a>
<a
id="sources"
sveltekit:prefetch
href="/sources"
class="icons bg-coolgray-200"
class:text-sources={$page.url.pathname.startsWith('/sources') ||
$page.url.pathname.startsWith('/new/source')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
$page.url.pathname.startsWith('/new/source')}
data-tip="Git Sources"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-9 w-9"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="6" cy="6" r="2" />
<circle cx="18" cy="18" r="2" />
<path d="M11 6h5a2 2 0 0 1 2 2v8" />
<polyline points="14 9 11 6 14 3" />
<path d="M13 18h-5a2 2 0 0 1 -2 -2v-8" />
<polyline points="10 15 13 18 10 21" />
</svg>
</a>
<a
id="destinations"
sveltekit:prefetch
href="/destinations"
class="icons bg-coolgray-200"
class:text-destinations={$page.url.pathname.startsWith('/destinations') ||
$page.url.pathname.startsWith('/new/destination')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
$page.url.pathname.startsWith('/new/destination')}
data-tip="Destinations"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-9 w-9"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
/>
<path d="M5 10h3v3h-3z" />
<path d="M8 10h3v3h-3z" />
<path d="M11 10h3v3h-3z" />
<path d="M8 7h3v3h-3z" />
<path d="M11 7h3v3h-3z" />
<path d="M11 4h3v3h-3z" />
<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
<line x1="10" y1="16" x2="10" y2="16.01" />
</svg>
</a>
<div class="border-t border-stone-700" />
<a
id="databases"
sveltekit:prefetch
href="/databases"
class="icons bg-coolgray-200"
class:text-databases={$page.url.pathname.startsWith('/databases') ||
$page.url.pathname.startsWith('/new/database')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
$page.url.pathname.startsWith('/new/database')}
data-tip="Databases"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-9 w-9"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<ellipse cx="12" cy="6" rx="8" ry="3" />
<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
</svg>
</a>
<a
id="services"
sveltekit:prefetch
href="/services"
class="icons bg-coolgray-200"
class:text-services={$page.url.pathname.startsWith('/services') ||
$page.url.pathname.startsWith('/new/service')}
class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
$page.url.pathname.startsWith('/new/service')}
data-tip="Services"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-9 w-9"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
</svg>
</a> -->
</div> </div>
<div class="flex-1" /> <div class="flex-1" />
@@ -408,14 +258,6 @@
</div> </div>
</main> </main>
<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
<Tooltip triggeredBy="#applications" placement="right" color="bg-applications">Applications</Tooltip
>
<Tooltip triggeredBy="#sources" placement="right" color="bg-sources">Git Sources</Tooltip>
<Tooltip triggeredBy="#destinations" placement="right" color="bg-destinations">Destinations</Tooltip
>
<Tooltip triggeredBy="#databases" placement="right" color="bg-databases">Databases</Tooltip>
<Tooltip triggeredBy="#services" placement="right" color="bg-services">Services</Tooltip>
<Tooltip triggeredBy="#iam" placement="right" color="bg-iam">IAM</Tooltip> <Tooltip triggeredBy="#iam" placement="right" color="bg-iam">IAM</Tooltip>
<Tooltip triggeredBy="#settings" placement="right" color="bg-settings text-black">Settings</Tooltip <Tooltip triggeredBy="#settings" placement="right" color="bg-settings text-black">Settings</Tooltip
> >

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

@@ -27,31 +27,7 @@
export let gitSources: any; export let gitSources: any;
export let destinations: any; export let destinations: any;
let filtered = { let filtered: any = setInitials();
applications: applications.filter(
(application: any) => application.teams[0].id === $appSession.teamId
),
otherApplications: applications.filter(
(application: any) => application.teams[0].id !== $appSession.teamId
),
databases: databases.filter((database: any) => database.teams[0].id === $appSession.teamId),
otherDatabases: databases.filter(
(database: any) => database.teams[0].id !== $appSession.teamId
),
services: services.filter((service: any) => service.teams[0].id === $appSession.teamId),
otherServices: services.filter((service: any) => service.teams[0].id !== $appSession.teamId),
settings,
gitSources: gitSources.filter((gitSource: any) => gitSource.teams[0].id === $appSession.teamId),
otherGitSources: gitSources.filter(
(gitSource: any) => gitSource.teams[0].id !== $appSession.teamId
),
destinations: destinations.filter(
(destination: any) => destination.teams[0].id === $appSession.teamId
),
otherDestinations: destinations.filter(
(destination: any) => destination.teams[0].id !== $appSession.teamId
)
};
import { get, post } from '$lib/api'; import { get, post } from '$lib/api';
import Usage from '$lib/components/Usage.svelte'; import Usage from '$lib/components/Usage.svelte';
import { t } from '$lib/translations'; import { t } from '$lib/translations';
@@ -68,6 +44,50 @@
let search = ''; let search = '';
let status: any = {}; let status: any = {};
function setInitials(onlyOthers: boolean = false) {
return {
applications:
!onlyOthers &&
applications.filter((application: any) => application.teams[0].id === $appSession.teamId),
otherApplications: applications.filter(
(application: any) => application.teams[0].id !== $appSession.teamId
),
databases:
!onlyOthers &&
databases.filter((database: any) => database.teams[0].id === $appSession.teamId),
otherDatabases: databases.filter(
(database: any) => database.teams[0].id !== $appSession.teamId
),
services:
!onlyOthers &&
services.filter((service: any) => service.teams[0].id === $appSession.teamId),
otherServices: services.filter((service: any) => service.teams[0].id !== $appSession.teamId),
gitSources:
!onlyOthers &&
gitSources.filter((gitSource: any) => gitSource.teams[0].id === $appSession.teamId),
otherGitSources: gitSources.filter(
(gitSource: any) => gitSource.teams[0].id !== $appSession.teamId
),
destinations:
!onlyOthers &&
destinations.filter((destination: any) => destination.teams[0].id === $appSession.teamId),
otherDestinations: destinations.filter(
(destination: any) => destination.teams[0].id !== $appSession.teamId
)
};
}
function clearFiltered() {
filtered.applications = [];
filtered.otherApplications = [];
filtered.databases = [];
filtered.otherDatabases = [];
filtered.services = [];
filtered.otherServices = [];
filtered.gitSources = [];
filtered.otherGitSources = [];
filtered.destinations = [];
filtered.otherDestinations = [];
}
function getRndInteger(min: number, max: number) { function getRndInteger(min: number, max: number) {
return Math.floor(Math.random() * (max - min + 1)) + min; return Math.floor(Math.random() * (max - min + 1)) + min;
} }
@@ -92,211 +112,57 @@
isRunning = response.isRunning; isRunning = response.isRunning;
} }
if (isRunning) { if (isRunning) {
status[id] = 'Running'; status[id] = 'running';
return 'Running'; return 'running';
} else { } else {
status[id] = 'Stopped'; status[id] = 'stopped';
return 'Stopped'; return 'stopped';
} }
} catch (error) { } catch (error) {
status[id] = 'Error'; status[id] = 'error';
return 'Error'; return 'error';
} finally { } finally {
numberOfGetStatus--; numberOfGetStatus--;
} }
} }
function filterState(state: string) {
function doSearch(bang?: string) { clearFiltered();
if (bang || bang === '') search = bang;
if (search) {
if (search.startsWith('!')) {
if (search === '!running') {
filtered.applications = applications.filter((application: any) => { filtered.applications = applications.filter((application: any) => {
if ( if (status[application.id] === state && application.teams[0].id === $appSession.teamId)
status[application.id] === 'Running' &&
application.teams[0].id === $appSession.teamId
)
return application; return application;
}); });
filtered.otherApplications = applications.filter((application: any) => { filtered.otherApplications = applications.filter((application: any) => {
if ( if (status[application.id] === state && application.teams[0].id !== $appSession.teamId)
status[application.id] === 'Running' &&
application.teams[0].id !== $appSession.teamId
)
return application; return application;
}); });
filtered.databases = databases.filter((database: any) => { filtered.databases = databases.filter((database: any) => {
if (status[database.id] === 'Running' && database.teams[0].id === $appSession.teamId) if (status[database.id] === state && database.teams[0].id === $appSession.teamId)
return database; return database;
}); });
filtered.otherDatabases = databases.filter((database: any) => { filtered.otherDatabases = databases.filter((database: any) => {
if (status[database.id] === 'Running' && database.teams[0].id !== $appSession.teamId) if (status[database.id] === state && database.teams[0].id !== $appSession.teamId)
return database; return database;
}); });
filtered.services = services.filter((service: any) => { filtered.services = services.filter((service: any) => {
if (status[service.id] === 'Running' && service.teams[0].id === $appSession.teamId) if (status[service.id] === state && service.teams[0].id === $appSession.teamId)
return service; return service;
}); });
filtered.otherServices = services.filter((service: any) => { filtered.otherServices = services.filter((service: any) => {
if (status[service.id] === 'Running' && service.teams[0].id !== $appSession.teamId) if (status[service.id] === state && service.teams[0].id !== $appSession.teamId)
return service; return service;
}); });
filtered.gitSources = [];
filtered.otherGitSources = [];
filtered.destinations = [];
filtered.otherDestinations = [];
} else if (search === '!stopped') {
filtered.applications = applications.filter((application: any) => {
if (
status[application.id] === 'Stopped' &&
application.teams[0].id === $appSession.teamId
)
return application;
});
filtered.otherApplications = applications.filter((application: any) => {
if (
status[application.id] === 'Stopped' &&
application.teams[0].id !== $appSession.teamId
)
return application;
});
filtered.databases = databases.filter((database: any) => {
if (status[database.id] === 'Stopped' && database.teams[0].id === $appSession.teamId)
return database;
});
filtered.otherDatabases = databases.filter((database: any) => {
if (status[database.id] === 'Stopped' && database.teams[0].id !== $appSession.teamId)
return database;
});
filtered.services = services.filter((service: any) => {
if (status[service.id] === 'Stopped' && service.teams[0].id === $appSession.teamId)
return service;
});
filtered.otherServices = services.filter((service: any) => {
if (status[service.id] === 'Stopped' && service.teams[0].id !== $appSession.teamId)
return service;
});
filtered.gitSources = [];
filtered.otherGitSources = [];
filtered.destinations = [];
filtered.otherDestinations = [];
} else if (search === '!error') {
filtered.applications = applications.filter((application: any) => {
if (
status[application.id] === 'Error' &&
application.teams[0].id === $appSession.teamId
)
return application;
});
filtered.otherApplications = applications.filter((application: any) => {
if (
status[application.id] === 'Error' &&
application.teams[0].id !== $appSession.teamId
)
return application;
});
filtered.databases = databases.filter((database: any) => {
if (status[database.id] === 'Error' && database.teams[0].id === $appSession.teamId)
return database;
});
filtered.otherDatabases = databases.filter((database: any) => {
if (status[database.id] === 'Error' && database.teams[0].id !== $appSession.teamId)
return database;
});
filtered.services = services.filter((service: any) => {
if (status[service.id] === 'Error' && service.teams[0].id === $appSession.teamId)
return service;
});
filtered.otherServices = services.filter((service: any) => {
if (status[service.id] === 'Error' && service.teams[0].id !== $appSession.teamId)
return service;
});
filtered.gitSources = [];
filtered.otherGitSources = [];
filtered.destinations = [];
filtered.otherDestinations = [];
} else if (search === '!app') {
filtered.applications = applications.filter(
(application: any) => application.teams[0].id === $appSession.teamId
);
filtered.databases = [];
filtered.otherDatabases = [];
filtered.services = [];
filtered.otherServices = [];
filtered.gitSources = [];
filtered.otherGitSources = [];
filtered.destinations = [];
filtered.otherDestinations = [];
} else if (search === '!db') {
filtered.applications = [];
filtered.otherApplications = [];
filtered.databases = databases.filter(
(database: any) => database.teams[0].id === $appSession.teamId
);
filtered.services = [];
filtered.otherServices = [];
filtered.gitSources = [];
filtered.otherGitSources = [];
filtered.destinations = [];
filtered.otherDestinations = [];
} else if (search === '!service') {
filtered.applications = [];
filtered.otherApplications = [];
filtered.databases = [];
filtered.otherDatabases = [];
filtered.services = services.filter(
(service: any) => service.teams[0].id === $appSession.teamId
);
filtered.gitSources = [];
filtered.otherGitSources = [];
filtered.destinations = [];
filtered.otherDestinations = [];
} else if (search === '!git') {
filtered.applications = [];
filtered.otherApplications = [];
filtered.databases = [];
filtered.otherDatabases = [];
filtered.services = [];
filtered.otherServices = [];
filtered.gitSources = gitSources.filter(
(source: any) => source.teams[0].id === $appSession.teamId
);
filtered.destinations = [];
filtered.otherDestinations = [];
} else if (search === '!destination') {
filtered.applications = [];
filtered.otherApplications = [];
filtered.databases = [];
filtered.otherDatabases = [];
filtered.services = [];
filtered.otherServices = [];
filtered.gitSources = [];
filtered.otherGitSources = [];
filtered.destinations = destinations.filter(
(destination: any) => destination.teams[0].id === $appSession.teamId
);
} else if (search === '!bot') {
filtered.applications = applications.filter((application: any) => {
return application.settings.isBot;
});
filtered.otherApplications = applications.filter((application: any) => {
return application.settings.isBot && application.teams[0].id !== $appSession.teamId;
});
filtered.databases = [];
filtered.otherDatabases = [];
filtered.services = [];
filtered.otherServices = [];
filtered.gitSources = [];
filtered.otherGitSources = [];
} else if (search === '!notmine') {
filtered.applications = [];
filtered.databases = [];
filtered.services = [];
filtered.gitSources = [];
filtered.destinations = [];
} }
} else { function filterSpecific(type: any) {
filtered.applications = applications.filter((application: any) => { clearFiltered();
const otherType = 'other' + type[0].toUpperCase() + type.substring(1);
filtered[type] = eval(type).filter(
(resource: any) => resource.teams[0].id === $appSession.teamId
);
filtered[otherType] = eval(type).filter(
(resource: any) => resource.teams[0].id !== $appSession.teamId
);
}
function applicationFilters(application: any) {
return ( return (
(application.name && application.name.toLowerCase().includes(search.toLowerCase())) || (application.name && application.name.toLowerCase().includes(search.toLowerCase())) ||
(application.fqdn && application.fqdn.toLowerCase().includes(search.toLowerCase())) || (application.fqdn && application.fqdn.toLowerCase().includes(search.toLowerCase())) ||
@@ -304,14 +170,13 @@
application.repository.toLowerCase().includes(search.toLowerCase())) || application.repository.toLowerCase().includes(search.toLowerCase())) ||
(application.buildpack && (application.buildpack &&
application.buildpack.toLowerCase().includes(search.toLowerCase())) || application.buildpack.toLowerCase().includes(search.toLowerCase())) ||
(application.branch && (application.branch && application.branch.toLowerCase().includes(search.toLowerCase())) ||
application.branch.toLowerCase().includes(search.toLowerCase())) ||
(application.destinationDockerId && (application.destinationDockerId &&
application.destinationDocker.name.toLowerCase().includes(search.toLowerCase())) || application.destinationDocker.name.toLowerCase().includes(search.toLowerCase())) ||
('bot'.includes(search) && application.settings.isBot) ('bot'.includes(search) && application.settings.isBot)
); );
}); }
filtered.databases = databases.filter((database: any) => { function databaseFilters(database: any) {
return ( return (
(database.name && database.name.toLowerCase().includes(search.toLowerCase())) || (database.name && database.name.toLowerCase().includes(search.toLowerCase())) ||
(database.type && database.type.toLowerCase().includes(search.toLowerCase())) || (database.type && database.type.toLowerCase().includes(search.toLowerCase())) ||
@@ -319,8 +184,8 @@
(database.destinationDockerId && (database.destinationDockerId &&
database.destinationDocker.name.toLowerCase().includes(search.toLowerCase())) database.destinationDocker.name.toLowerCase().includes(search.toLowerCase()))
); );
}); }
filtered.services = services.filter((service: any) => { function serviceFilters(service: any) {
return ( return (
(service.name && service.name.toLowerCase().includes(search.toLowerCase())) || (service.name && service.name.toLowerCase().includes(search.toLowerCase())) ||
(service.type && service.type.toLowerCase().includes(search.toLowerCase())) || (service.type && service.type.toLowerCase().includes(search.toLowerCase())) ||
@@ -328,28 +193,84 @@
(service.destinationDockerId && (service.destinationDockerId &&
service.destinationDocker.name.toLowerCase().includes(search.toLowerCase())) service.destinationDocker.name.toLowerCase().includes(search.toLowerCase()))
); );
}); }
filtered.gitSources = gitSources.filter((source: any) => { function gitSourceFilters(source: any) {
return ( return (
(source.name && source.name.toLowerCase().includes(search.toLowerCase())) || (source.name && source.name.toLowerCase().includes(search.toLowerCase())) ||
(source.type && source.type.toLowerCase().includes(search.toLowerCase())) || (source.type && source.type.toLowerCase().includes(search.toLowerCase())) ||
(source.htmlUrl && source.htmlUrl.toLowerCase().includes(search.toLowerCase())) || (source.htmlUrl && source.htmlUrl.toLowerCase().includes(search.toLowerCase())) ||
(source.apiUrl && source.apiUrl.toLowerCase().includes(search.toLowerCase())) (source.apiUrl && source.apiUrl.toLowerCase().includes(search.toLowerCase()))
); );
}); }
filtered.destinations = destinations.filter((destination: any) => { function destinationFilters(destination: any) {
return ( return (
(destination.name && destination.name.toLowerCase().includes(search.toLowerCase())) || (destination.name && destination.name.toLowerCase().includes(search.toLowerCase())) ||
(destination.type && destination.type.toLowerCase().includes(search.toLowerCase())) (destination.type && destination.type.toLowerCase().includes(search.toLowerCase()))
); );
}
function doSearch(bang?: string) {
if (bang || bang === '') search = bang;
if (search) {
filtered = setInitials();
if (search.startsWith('!')) {
if (search === '!running') {
filterState('running');
} else if (search === '!stopped') {
filterState('stopped');
} else if (search === '!error') {
filterState('error');
} else if (search === '!app') {
filterSpecific('applications');
} else if (search === '!db') {
filterSpecific('databases');
} else if (search === '!service') {
filterSpecific('services');
} else if (search === '!git') {
filterSpecific('gitSources');
} else if (search === '!destination') {
filterSpecific('destinations');
} else if (search === '!bot') {
clearFiltered();
filtered.applications = applications.filter((application: any) => {
return application.settings.isBot;
}); });
filtered.otherApplications = applications.filter((application: any) => {
return application.settings.isBot && application.teams[0].id !== $appSession.teamId;
});
} else if (search === '!notmine') {
clearFiltered();
filtered = setInitials(true);
} }
} else { } else {
filtered.applications = applications; filtered.applications = filtered.applications.filter((application: any) =>
filtered.databases = databases; applicationFilters(application)
filtered.services = services; );
filtered.gitSources = gitSources; filtered.otherApplications = filtered.otherApplications.filter((application: any) =>
filtered.destinations = destinations; applicationFilters(application)
);
filtered.databases = filtered.databases.filter((database: any) =>
databaseFilters(database)
);
filtered.otherDatabases = filtered.otherDatabases.filter((database: any) =>
databaseFilters(database)
);
filtered.services = filtered.services.filter((service: any) => serviceFilters(service));
filtered.otherServices = filtered.otherServices.filter((service: any) =>
serviceFilters(service)
);
filtered.gitSources = filtered.gitSources.filter((source: any) => gitSourceFilters(source));
filtered.otherGitSources = filtered.otherGitSources.filter((source: any) =>
gitSourceFilters(source)
);
filtered.destinations = filtered.destinations.filter((destination: any) =>
destinationFilters(destination)
);
filtered.otherDestinations = filtered.otherDestinations.filter((destination: any) =>
destinationFilters(destination)
);
}
} else {
filtered = setInitials();
} }
} }
</script> </script>
@@ -367,20 +288,24 @@
{#if applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0} {#if applications.length !== 0 || destinations.length !== 0 || databases.length !== 0 || services.length !== 0 || gitSources.length !== 0 || destinations.length !== 0}
<div class="form-control"> <div class="form-control">
<div class="input-group flex w-full"> <div class="input-group flex w-full">
<div class="btn btn-square cursor-default no-animation"> <div
class="btn btn-square cursor-default no-animation hover:bg-error"
on:click={() => doSearch('')}
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6" class="w-6 h-6"
fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5"
><path stroke="currentcolor"
fill="none"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/></svg
> >
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</div> </div>
<input <input
@@ -393,70 +318,68 @@
/> />
</div> </div>
<label for="search" class="label w-full"> <label for="search" class="label w-full">
<span <span class="label-text text-xs flex flex-wrap gap-2 items-center">
class="label-text text-xs flex flex-wrap space-x-2 space-y-2 lg:space-y-0 items-center" <button
class:bg-coollabs={search === '!notmine'}
class="badge badge-lg text-white text-xs rounded"
on:click={() => doSearch('!notmine')}>Other Teams</button
> >
<button <button
class:bg-coollabs={search === '!app'} class:bg-coollabs={search === '!app'}
class="badge badge-lg text-white text-xs" class="badge badge-lg text-white text-xs rounded"
on:click={() => doSearch('!app')}>Applications</button on:click={() => doSearch('!app')}>Applications</button
> >
<button <button
class:bg-coollabs={search === '!bot'} class:bg-coollabs={search === '!bot'}
class="badge badge-lg text-white text-xs" class="badge badge-lg text-white text-xs rounded"
on:click={() => doSearch('!bot')}>Bots</button on:click={() => doSearch('!bot')}>Bots</button
> >
<button <button
class:bg-coollabs={search === '!service'} class:bg-coollabs={search === '!service'}
class="badge badge-lg bg-coollabs text-white text-xs" class="badge badge-lg text-white text-xs rounded"
on:click={() => doSearch('!service')}>Services</button on:click={() => doSearch('!service')}>Services</button
> >
<button <button
class:bg-coollabs={search === '!db'} class:bg-coollabs={search === '!db'}
class="badge badge-lg bg-coollabs text-white text-xs" class="badge badge-lg text-white text-xs rounded"
on:click={() => doSearch('!db')}>Databases</button on:click={() => doSearch('!db')}>Databases</button
> >
<button <button
class:bg-coollabs={search === '!git'} class:bg-coollabs={search === '!git'}
class="badge badge-lg bg-coollabs text-white text-xs" class="badge badge-lg text-white text-xs rounded"
on:click={() => doSearch('!git')}>Git Sources</button on:click={() => doSearch('!git')}>Git Sources</button
> >
<button <button
class:bg-coollabs={search === '!destination'} class:bg-coollabs={search === '!destination'}
class="badge badge-lg bg-coollabs text-white text-xs" class="badge badge-lg text-white text-xs rounded"
on:click={() => doSearch('!destination')}>Destinations</button on:click={() => doSearch('!destination')}>Destinations</button
> >
<button <button
class:bg-coollabs={search === '!running'} class:bg-coollabs={search === '!running'}
class="badge badge-lg bg-coollabs text-white text-xs" class="badge badge-lg text-white text-xs rounded"
on:click={() => doSearch('!running')}>Running</button on:click={() => doSearch('!running')}>Running</button
> >
<button <button
class:bg-coollabs={search === '!stopped'} class:bg-coollabs={search === '!stopped'}
class="badge badge-lg bg-coollabs text-white text-xs" class="badge badge-lg text-white text-xs rounded"
on:click={() => doSearch('!stopped')}>Stopped</button on:click={() => doSearch('!stopped')}>Stopped</button
> >
<button <button
class:bg-coollabs={search === '!error'} class:bg-coollabs={search === '!error'}
class="badge badge-lg bg-coollabs text-white text-xs" class="badge badge-lg text-white text-xs rounded"
on:click={() => doSearch('!error')}>Error</button on:click={() => doSearch('!error')}>Error</button
> >
<button
class="badge badge-lg bg-coollabs text-white text-xs"
on:click={() => doSearch('')}>Clear</button
>
</span> </span>
</label> </label>
</div> </div>
{/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-14"> <div class="flex items-center mt-10">
<h1 class="title lg:text-3xl">Applications</h1> <h1 class="title lg:text-3xl">Applications</h1>
</div> </div>
{/if} {/if}
{#if filtered.applications.length > 0 && applications.length > 0} {#if filtered.applications.length > 0 && applications.length > 0}
<div class="divider" /> <div class="divider" />
<div <div
class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4" class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4"
> >
@@ -467,7 +390,7 @@
{#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 status}
{#if status === 'Running'} {#if status === '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" />
@@ -493,6 +416,9 @@
{#if application.destinationDocker?.name} {#if application.destinationDocker?.name}
<div class="truncate">{application.destinationDocker.name}</div> <div class="truncate">{application.destinationDocker.name}</div>
{/if} {/if}
{#if application.teams.length > 0 && application.teams[0].name}
<div class="truncate">{application.teams[0].name}</div>
{/if}
</div> </div>
<div class="flex justify-end items-end space-x-2 h-10"> <div class="flex justify-end items-end space-x-2 h-10">
@@ -560,17 +486,17 @@
<h1 class="text-lg font-bold">Other Teams</h1> <h1 class="text-lg font-bold">Other Teams</h1>
</div> </div>
{/if} {/if}
{#if filtered.otherApplications.length > 0}
<div <div
class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4" class="grid grid-col gap-8 auto-cols-max grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4"
> >
{#if filtered.otherApplications.length > 0}
{#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">
{#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 status}
{#if status === 'Running'} {#if status === '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" />
@@ -595,6 +521,9 @@
{#if application.destinationDocker?.name} {#if application.destinationDocker?.name}
<div class="truncate">{application.destinationDocker.name}</div> <div class="truncate">{application.destinationDocker.name}</div>
{/if} {/if}
{#if application.teams.length > 0 && application.teams[0].name}
<div class="truncate">{application.teams[0].name}</div>
{/if}
</div> </div>
<div class="flex justify-end items-end space-x-2 h-10"> <div class="flex justify-end items-end space-x-2 h-10">
@@ -647,9 +576,9 @@
</div> </div>
</a> </a>
{/each} {/each}
{/if}
</div> </div>
{#if (filtered.services.length > 0 && services.length > 0) || filtered.services.length > 0} {/if}
{#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">Services</h1>
</div> </div>
@@ -666,7 +595,7 @@
{#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 status}
{#if status === 'Running'} {#if status === '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" />
@@ -685,6 +614,9 @@
{#if service.destinationDocker?.name} {#if service.destinationDocker?.name}
<div class="truncate">{service.destinationDocker.name}</div> <div class="truncate">{service.destinationDocker.name}</div>
{/if} {/if}
{#if service.teams.length > 0 && service.teams[0].name}
<div class="truncate">{service.teams[0].name}</div>
{/if}
</div> </div>
<div class="flex justify-end items-end space-x-2 h-10"> <div class="flex justify-end items-end space-x-2 h-10">
{#if service.fqdn} {#if service.fqdn}
@@ -716,6 +648,7 @@
<h1 class="">Nothing here.</h1> <h1 class="">Nothing here.</h1>
{/if} {/if}
</div> </div>
{/if}
{#if filtered.otherServices.length > 0} {#if filtered.otherServices.length > 0}
{#if filtered.services.length > 0} {#if filtered.services.length > 0}
<div class="divider w-32 mx-auto" /> <div class="divider w-32 mx-auto" />
@@ -734,7 +667,7 @@
{#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 status}
{#if status === 'Running'} {#if status === '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" />
@@ -753,6 +686,9 @@
{#if service.destinationDocker?.name} {#if service.destinationDocker?.name}
<div class="truncate">{service.destinationDocker.name}</div> <div class="truncate">{service.destinationDocker.name}</div>
{/if} {/if}
{#if service.teams.length > 0 && service.teams[0].name}
<div class="truncate">{service.teams[0].name}</div>
{/if}
</div> </div>
<div class="flex justify-end items-end space-x-2 h-10"> <div class="flex justify-end items-end space-x-2 h-10">
{#if service.fqdn} {#if service.fqdn}
@@ -782,8 +718,7 @@
{/each} {/each}
</div> </div>
{/if} {/if}
{/if} {#if (filtered.databases.length > 0 && databases.length > 0) || filtered.otherDatabases.length > 0}
{#if (filtered.databases.length > 0 && databases.length > 0) || filtered.databases.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">Databases</h1>
</div> </div>
@@ -800,7 +735,7 @@
{#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 status}
{#if status === 'Running'} {#if status === '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" />
@@ -820,6 +755,9 @@
{#if database.destinationDocker?.name} {#if database.destinationDocker?.name}
<div class="truncate">{database.destinationDocker.name}</div> <div class="truncate">{database.destinationDocker.name}</div>
{/if} {/if}
{#if database.teams.length > 0 && database.teams[0].name}
<div class="truncate">{database.teams[0].name}</div>
{/if}
</div> </div>
</div> </div>
<div class="flex justify-end items-end space-x-2 h-10"> <div class="flex justify-end items-end space-x-2 h-10">
@@ -854,8 +792,9 @@
<h1 class="">Nothing here.</h1> <h1 class="">Nothing here.</h1>
{/if} {/if}
</div> </div>
{/if}
{#if filtered.otherDatabases.length > 0} {#if filtered.otherDatabases.length > 0}
{#if databases.length > 0} {#if filtered.databases.length > 0}
<div class="divider w-32 mx-auto" /> <div class="divider w-32 mx-auto" />
{/if} {/if}
<div class="flex items-center mt-10"> <div class="flex items-center mt-10">
@@ -872,7 +811,7 @@
{#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 status}
{#if status === 'Running'} {#if status === '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" />
@@ -892,6 +831,9 @@
{#if database.destinationDocker?.name} {#if database.destinationDocker?.name}
<div class="truncate">{database.destinationDocker.name}</div> <div class="truncate">{database.destinationDocker.name}</div>
{/if} {/if}
{#if database.teams.length > 0 && database.teams[0].name}
<div class="truncate">{database.teams[0].name}</div>
{/if}
</div> </div>
</div> </div>
<div class="flex justify-end items-end space-x-2 h-10"> <div class="flex justify-end items-end space-x-2 h-10">
@@ -924,8 +866,7 @@
{/each} {/each}
</div> </div>
{/if} {/if}
{/if} {#if (filtered.gitSources.length > 0 && gitSources.length > 0) || filtered.otherGitSources.length > 0}
{#if (filtered.gitSources.length > 0 && gitSources.length > 0) || filtered.gitSources.length > 0}
<div class="flex items-center mt-10"> <div class="flex items-center mt-10">
<h1 class="title lg:text-3xl">Git Sources</h1> <h1 class="title lg:text-3xl">Git Sources</h1>
</div> </div>
@@ -980,7 +921,11 @@
<div class="w-full flex flex-col"> <div class="w-full flex flex-col">
<div class="h-10"> <div class="h-10">
<h1 class="font-bold text-lg lg:text-xl truncate">{source.name}</h1> <h1 class="font-bold text-lg lg:text-xl truncate">{source.name}</h1>
{#if source.teams.length > 0 && source.teams[0].name}
<div class="truncate text-xs">{source.teams[0].name}</div>
{/if}
</div> </div>
<div class="flex justify-end items-end space-x-2 h-10" /> <div class="flex justify-end items-end space-x-2 h-10" />
</div> </div>
</div> </div>
@@ -991,8 +936,9 @@
<h1 class="">Nothing here.</h1> <h1 class="">Nothing here.</h1>
{/if} {/if}
</div> </div>
{/if}
{#if filtered.otherGitSources.length > 0} {#if filtered.otherGitSources.length > 0}
{#if gitSources.length > 0} {#if filtered.gitSources.length > 0}
<div class="divider w-32 mx-auto" /> <div class="divider w-32 mx-auto" />
{/if} {/if}
<div class="flex items-center mt-10"> <div class="flex items-center mt-10">
@@ -1047,6 +993,9 @@
<div class="w-full flex flex-col"> <div class="w-full flex flex-col">
<div class="h-10"> <div class="h-10">
<h1 class="font-bold text-lg lg:text-xl truncate">{source.name}</h1> <h1 class="font-bold text-lg lg:text-xl truncate">{source.name}</h1>
{#if source.teams.length > 0 && source.teams[0].name}
<div class="truncate text-xs">{source.teams[0].name}</div>
{/if}
</div> </div>
<div class="flex justify-end items-end space-x-2 h-10" /> <div class="flex justify-end items-end space-x-2 h-10" />
</div> </div>
@@ -1056,8 +1005,7 @@
{/each} {/each}
</div> </div>
{/if} {/if}
{/if} {#if (filtered.destinations.length > 0 && destinations.length > 0) || filtered.otherDestinations.length > 0}
{#if (filtered.destinations.length > 0 && destinations.length > 0) || filtered.destinations.length > 0}
<div class="flex items-center mt-10"> <div class="flex items-center mt-10">
<h1 class="title lg:text-3xl">Destinations</h1> <h1 class="title lg:text-3xl">Destinations</h1>
</div> </div>
@@ -1124,6 +1072,9 @@
{#if destination.remoteEngine && !destination.sshKeyId} {#if destination.remoteEngine && !destination.sshKeyId}
<h2 class="text-red-500">SSH key missing</h2> <h2 class="text-red-500">SSH key missing</h2>
{/if} {/if}
{#if destination.teams.length > 0 && destination.teams[0].name}
<div class="truncate">{destination.teams[0].name}</div>
{/if}
</div> </div>
</div> </div>
</div> </div>
@@ -1134,8 +1085,9 @@
<h1 class="">Nothing here.</h1> <h1 class="">Nothing here.</h1>
{/if} {/if}
</div> </div>
{/if}
{#if filtered.otherDestinations.length > 0} {#if filtered.otherDestinations.length > 0}
{#if destinations.length > 0} {#if filtered.destinations.length > 0}
<div class="divider w-32 mx-auto" /> <div class="divider w-32 mx-auto" />
{/if} {/if}
<div class="flex items-center mt-10"> <div class="flex items-center mt-10">
@@ -1202,6 +1154,9 @@
{#if destination.remoteEngine && !destination.sshKeyId} {#if destination.remoteEngine && !destination.sshKeyId}
<h2 class="text-red-500">SSH key missing</h2> <h2 class="text-red-500">SSH key missing</h2>
{/if} {/if}
{#if destination.teams.length > 0 && destination.teams[0].name}
<div class="truncate">{destination.teams[0].name}</div>
{/if}
</div> </div>
</div> </div>
</div> </div>
@@ -1210,7 +1165,6 @@
{/each} {/each}
</div> </div>
{/if} {/if}
{/if}
{#if filtered.applications.length === 0 && filtered.destinations.length === 0 && filtered.databases.length === 0 && filtered.services.length === 0 && filtered.gitSources.length === 0 && filtered.destinations.length === 0 && search} {#if filtered.applications.length === 0 && filtered.destinations.length === 0 && filtered.databases.length === 0 && filtered.services.length === 0 && filtered.gitSources.length === 0 && filtered.destinations.length === 0 && search}
<div class="flex flex-col items-center justify-center h-full pt-20"> <div class="flex flex-col items-center justify-center h-full pt-20">