fix: fix dashboard UI (#7006)

Signed-off-by: lstocchi <lstocchi@redhat.com>
This commit is contained in:
Luca Stocchi 2024-04-30 09:42:50 +02:00 committed by GitHub
parent 9e4f42f71a
commit d3f061e73d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 29 additions and 21 deletions

View file

@ -139,7 +139,7 @@ function onInstallationClick() {
To start working with containers, {provider.name} needs to be initialized.
</p>
<div class="mt-5" class:hidden="{!initializationButtonVisible}">
<div class="mt-5 relative" class:hidden="{!initializationButtonVisible}">
<div class="bg-gray-300 text-white flex">
<button
class="float-left bg-purple-600 hover:bg-purple-500 pt-2 pr-3 pl-3 pb-2 text-[13px] text-white mr-px w-[180px]"
@ -153,7 +153,7 @@ function onInstallationClick() {
</button>
</div>
<div
class="-z-1 min-w-[130px] m-auto bg-primary text-[13px] text-white"
class="z-10 min-w-[130px] m-auto bg-primary text-[13px] text-white absolute w-full"
class:hidden="{!installationOptionsMenuVisible}">
<ul class="w-full outline-none bg-charcoal-800 rounded-sm placeholder-gray-700">
<li>

View file

@ -15,25 +15,33 @@ let preflightChecks: CheckStatus[] = [];
<ProviderCard provider="{provider}">
<svelte:fragment slot="content">
<p class="text-sm text-gray-700 flex-grow" aria-label="Suggested Actions">
Could not find an installation. To start working with containers, {provider.name} needs to be detected/installed.
</p>
<div class="mt-5 mb-1 flex">
<ProviderDetectionChecksButton onDetectionChecks="{checks => (detectionChecks = checks)}" provider="{provider}" />
<ProviderInstallationButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
</div>
{#if detectionChecks.length > 0}
<div class="flex flex-col mt-5 px-5 pt-5 pb-0 rounded-lg bg-zinc-600">
{#each detectionChecks as detectionCheck}
<div class="flex flex-col">
<p class="mb-4 items-center list-inside">{detectionCheck.status ? '✅' : '❌'} {detectionCheck.name}</p>
{#if detectionCheck.details}
Details: <p class="text-gray-400 w-full break-all">{detectionCheck.details}</p>
{/if}
</div>
{/each}
<div class="flex flex-col grow">
<div class="flex flex-row items-center flex-row space-x-10 grow flex-nowrap">
<p class="text-sm text-gray-700 flex-grow" aria-label="Suggested Actions">
Could not find an installation. To start working with containers, {provider.name} needs to be detected/installed.
</p>
<div class="mt-5 mb-1 flex space-x-2">
<ProviderDetectionChecksButton
onDetectionChecks="{checks => (detectionChecks = checks)}"
provider="{provider}" />
<ProviderInstallationButton
onPreflightChecks="{checks => (preflightChecks = checks)}"
provider="{provider}" />
</div>
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />
{#if detectionChecks.length > 0}
<div class="flex flex-col mt-5 px-5 pt-5 pb-0 rounded-lg bg-zinc-600">
{#each detectionChecks as detectionCheck}
<div class="flex flex-col">
<p class="mb-4 items-center list-inside">{detectionCheck.status ? '✅' : '❌'} {detectionCheck.name}</p>
{#if detectionCheck.details}
Details: <p class="text-gray-400 w-full break-all">{detectionCheck.details}</p>
{/if}
</div>
{/each}
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />
</div>
</svelte:fragment>
</ProviderCard>