Skip to content

Commit

Permalink
fix(cluster-setup): callout for self managed (#1735)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RemiBonnet
RemiBonnet authored Oct 23, 2024
1 parent a575793 commit 4c6e57b
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 44 deletions.
20 changes: 20 additions & 0 deletions .../domains/clusters/feature/src/lib/cluster-setup/__snapshots__/cluster-setup.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,26 @@
exports[`ClusterSetup should match manage deployment snapshot 1`] = `
<body>
<div>
<div
class="flex flex-row gap-x-3 p-3 border rounded border-sky-500 bg-sky-50 text-sky-500 text-sm"
data-accent-color="sky"
>
<div
class="-order-2 text-base leading-6"
>
<i
aria-hidden="true"
class="fa-regular fa-info-circle "
/>
</div>
<div
class="-order-1 mr-auto gap-x-3 text-neutral-400"
>
<p>
This guide walks you through the process of installing Qovery on your existing Kubernetes cluster, where you will have full control over the infrastructure. You will be responsible for managing updates and upgrades. Please note that advanced Kubernetes knowledge is required.
</p>
</div>
</div>
<ul
class="flex flex-col gap-4 text-sm font-medium text-neutral-400"
>
Expand Down
104 changes: 60 additions & 44 deletions libs/domains/clusters/feature/src/lib/cluster-setup/cluster-setup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,67 @@
import { ExternalLink } from '@qovery/shared/ui'
import { Callout, ExternalLink, Icon } from '@qovery/shared/ui'
import CopyButton from './copy-button/copy-button'

export function ClusterSetup({ type }: { type: 'LOCAL_DEMO' | 'SELF_MANAGED' }) {
return (
<ul className="flex flex-col gap-4 text-sm font-medium text-neutral-400">
<li className="rounded border border-neutral-200 p-3">
<h5 className="mb-1 text-sm font-medium">1. Download/Update Qovery CLI</h5>
<p className="mb-2 font-normal text-neutral-350">
Download and install the Qovery CLI (or update its version to the latest version).
</p>
<ExternalLink href="https://hub.qovery.com/docs/using-qovery/interface/cli/#install">
https://hub.qovery.com/docs/using-qovery/interface/cli/#install
</ExternalLink>
</li>
<li className="rounded border border-neutral-200 p-3">
<h5 className="mb-1 text-sm font-medium">
2. {type === 'LOCAL_DEMO' ? 'Install your cluster' : 'Install Qovery on your cluster'}
</h5>
<p className="mb-2 font-normal text-neutral-350">
Run the following command from your terminal and follow the instructions.
</p>
<pre className="flex items-center justify-between rounded-sm bg-neutral-150 p-3 font-mono text-neutral-400">
{type === 'LOCAL_DEMO' ? (
<>
<span>
<span className="select-none">$ </span>qovery demo up
</span>
<CopyButton content="qovery demo up" />
</>
) : (
<>
<span>
<span className="select-none">$ </span>qovery cluster install
</span>
<CopyButton content="qovery cluster install" />
</>
)}
</pre>
</li>
<li className="rounded border border-neutral-200 p-3">
<h5 className="mb-1 text-sm font-medium">3. Deploy your first environment!</h5>
<p className="font-normal text-neutral-350">
Once the installation is completed, get back to the Qovery console and deploy your first environment on your
brand new cluster.
</p>
</li>
</ul>
<>
{type === 'SELF_MANAGED' && (
<Callout.Root className="text-sm" color="sky">
<Callout.Icon>
<Icon iconName="info-circle" iconStyle="regular" />
</Callout.Icon>
<Callout.Text>
<p>
This guide walks you through the process of installing Qovery on your existing Kubernetes cluster, where
you will have full control over the infrastructure. You will be responsible for managing updates and
upgrades. Please note that advanced Kubernetes knowledge is required.
</p>
</Callout.Text>
</Callout.Root>
)}
<ul className="flex flex-col gap-4 text-sm font-medium text-neutral-400">
<li className="rounded border border-neutral-200 p-3">
<h5 className="mb-1 text-sm font-medium">1. Download/Update Qovery CLI</h5>
<p className="mb-2 font-normal text-neutral-350">
Download and install the Qovery CLI (or update its version to the latest version).
</p>
<ExternalLink href="https://hub.qovery.com/docs/using-qovery/interface/cli/#install">
https://hub.qovery.com/docs/using-qovery/interface/cli/#install
</ExternalLink>
</li>
<li className="rounded border border-neutral-200 p-3">
<h5 className="mb-1 text-sm font-medium">
2. {type === 'LOCAL_DEMO' ? 'Install your cluster' : 'Install Qovery on your cluster'}
</h5>
<p className="mb-2 font-normal text-neutral-350">
Run the following command from your terminal and follow the instructions.
</p>
<pre className="flex items-center justify-between rounded-sm bg-neutral-150 p-3 font-mono text-neutral-400">
{type === 'LOCAL_DEMO' ? (
<>
<span>
<span className="select-none">$ </span>qovery demo up
</span>
<CopyButton content="qovery demo up" />
</>
) : (
<>
<span>
<span className="select-none">$ </span>qovery cluster install
</span>
<CopyButton content="qovery cluster install" />
</>
)}
</pre>
</li>
<li className="rounded border border-neutral-200 p-3">
<h5 className="mb-1 text-sm font-medium">3. Deploy your first environment!</h5>
<p className="font-normal text-neutral-350">
Once the installation is completed, get back to the Qovery console and deploy your first environment on your
brand new cluster.
</p>
</li>
</ul>
</>
)
}

Expand Down

0 comments on commit 4c6e57b

Please sign in to comment.