mirror of
https://github.com/portainer/portainer.git
synced 2025-08-09 07:45:22 +02:00
fix(wizard): show teasers for kaas and kubeconfig features [EE-3316] (#7008)
* fix(wizard): add kubeconfig, nomad and kaas teasers
This commit is contained in:
Ali
GitHub
parent
12527aa820
commit
be11dfc231
18 changed files with 284 additions and 15 deletions
|
|
@ -23,6 +23,7 @@ export function EnvironmentSelector({ value, onChange }: Props) {
|
|||
{environmentTypes.map((eType) => (
|
||||
<Option
|
||||
key={eType.id}
|
||||
featureId={eType.featureId}
|
||||
title={eType.title}
|
||||
description={eType.description}
|
||||
icon={eType.icon}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
.selected .mask-icon {
|
||||
color: var(--selected-item-color);
|
||||
}
|
||||
|
||||
.mask-icon {
|
||||
color: var(--bg-boxselector-color);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import clsx from 'clsx';
|
||||
|
||||
import styles from './KaaSIcon.module.css';
|
||||
|
||||
export interface Props {
|
||||
selected?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function KaaSIcon({ selected, className }: Props) {
|
||||
return (
|
||||
<span
|
||||
className={clsx('fa-stack fa-1x', styles.root, className, {
|
||||
[styles.selected]: selected,
|
||||
})}
|
||||
>
|
||||
<i className="fas fa-cloud fa-stack-2x" />
|
||||
<i className={clsx('fas fa-dharmachakra fa-stack-1x', styles.maskIcon)} />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,4 +1,16 @@
|
|||
export const environmentTypes = [
|
||||
import { FeatureId } from '@/portainer/feature-flags/enums';
|
||||
|
||||
import { KaaSIcon, Props as KaaSIconProps } from './KaaSIcon';
|
||||
|
||||
interface WizardEnvironmentOption {
|
||||
id: string;
|
||||
title: string;
|
||||
icon: string | { ({ selected, className }: KaaSIconProps): JSX.Element };
|
||||
description: string;
|
||||
featureId?: FeatureId;
|
||||
}
|
||||
|
||||
export const environmentTypes: WizardEnvironmentOption[] = [
|
||||
{
|
||||
id: 'docker',
|
||||
title: 'Docker',
|
||||
|
|
@ -18,4 +30,18 @@ export const environmentTypes = [
|
|||
description: 'Connect to ACI environment via API',
|
||||
icon: 'fab fa-microsoft',
|
||||
},
|
||||
] as const;
|
||||
{
|
||||
id: 'nomad',
|
||||
title: 'Nomad',
|
||||
description: 'Connect to HashiCorp Nomad environment via API',
|
||||
icon: 'nomad-icon',
|
||||
featureId: FeatureId.NOMAD,
|
||||
},
|
||||
{
|
||||
id: 'kaas',
|
||||
title: 'KaaS',
|
||||
description: 'Provision a Kubernetes environment with a cloud provider',
|
||||
icon: KaaSIcon,
|
||||
featureId: FeatureId.KAAS_PROVISIONING,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
import { Field, Form, Formik } from 'formik';
|
||||
|
||||
import { LoadingButton } from '@/portainer/components/Button/LoadingButton';
|
||||
import { FormControl } from '@/portainer/components/form-components/FormControl';
|
||||
import { FormSectionTitle } from '@/portainer/components/form-components/FormSectionTitle';
|
||||
import { Input } from '@/portainer/components/form-components/Input';
|
||||
import { Button } from '@/portainer/components/Button';
|
||||
|
||||
const initialValues = {
|
||||
kubeConfig: '',
|
||||
name: '',
|
||||
meta: {
|
||||
groupId: 1,
|
||||
tagIds: [],
|
||||
},
|
||||
};
|
||||
|
||||
export function KubeConfigTeaserForm() {
|
||||
return (
|
||||
<Formik initialValues={initialValues} onSubmit={() => {}} validateOnMount>
|
||||
{() => (
|
||||
<Form className="mt-5">
|
||||
<FormSectionTitle>Environment details</FormSectionTitle>
|
||||
|
||||
<div className="form-group">
|
||||
<div className="col-sm-12">
|
||||
<span className="text-primary">
|
||||
<i
|
||||
className="fa fa-exclamation-circle space-right"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</span>
|
||||
<span className="text-muted small">
|
||||
Import the
|
||||
<a
|
||||
href="https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/"
|
||||
target="_blank"
|
||||
className="space-right space-left"
|
||||
rel="noreferrer"
|
||||
>
|
||||
kubeconfig file
|
||||
</a>
|
||||
of an existing Kubernetes cluster located on-premise or on a
|
||||
cloud platform. This will create a corresponding environment in
|
||||
Portainer and install the agent on the cluster. Please ensure:
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-sm-12 text-muted small">
|
||||
<ul className="p-2 pl-4">
|
||||
<li>You have a load balancer enabled in your cluster</li>
|
||||
<li>You specify current-context in your kubeconfig</li>
|
||||
<li>
|
||||
The kubeconfig is self-contained - including any required
|
||||
credentials.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Note: Officially supported cloud providers are Civo, Linode,
|
||||
DigitalOcean and Microsoft Azure (others are not guaranteed to
|
||||
work at present)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FormControl label="Name" required>
|
||||
<Field
|
||||
name="name"
|
||||
as={Input}
|
||||
data-cy="endpointCreate-nameInput"
|
||||
placeholder="e.g. docker-prod01 / kubernetes-cluster01"
|
||||
readOnly
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<FormControl
|
||||
label="Kubeconfig file"
|
||||
required
|
||||
inputId="kubeconfig_file"
|
||||
>
|
||||
<Button disabled>Select a file</Button>
|
||||
</FormControl>
|
||||
|
||||
<div className="form-group">
|
||||
<div className="col-sm-12">
|
||||
<LoadingButton
|
||||
className="wizard-connect-button"
|
||||
loadingText="Connecting environment..."
|
||||
isLoading={false}
|
||||
disabled
|
||||
>
|
||||
<i className="fa fa-plug" aria-hidden="true" /> Connect
|
||||
</LoadingButton>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
|
@ -7,11 +7,14 @@ import {
|
|||
} from '@/portainer/environments/types';
|
||||
import { BoxSelectorOption } from '@/portainer/components/BoxSelector/types';
|
||||
import { commandsTabs } from '@/react/edge/components/EdgeScriptForm/scripts';
|
||||
import { FeatureId } from '@/portainer/feature-flags/enums';
|
||||
import { BEFeatureIndicator } from '@/portainer/components/BEFeatureIndicator';
|
||||
|
||||
import { AnalyticsStateKey } from '../types';
|
||||
import { EdgeAgentTab } from '../shared/EdgeAgentTab';
|
||||
|
||||
import { AgentPanel } from './AgentPanel';
|
||||
import { KubeConfigTeaserForm } from './KubeConfigTeaserForm';
|
||||
|
||||
interface Props {
|
||||
onCreate(environment: Environment, analytics: AnalyticsStateKey): void;
|
||||
|
|
@ -20,6 +23,7 @@ interface Props {
|
|||
const options: BoxSelectorOption<
|
||||
| EnvironmentCreationTypes.AgentEnvironment
|
||||
| EnvironmentCreationTypes.EdgeAgentEnvironment
|
||||
| EnvironmentCreationTypes.KubeConfigEnvironment
|
||||
>[] = [
|
||||
{
|
||||
id: 'agent_endpoint',
|
||||
|
|
@ -35,6 +39,14 @@ const options: BoxSelectorOption<
|
|||
description: '',
|
||||
value: EnvironmentCreationTypes.EdgeAgentEnvironment,
|
||||
},
|
||||
{
|
||||
id: 'kubeconfig_endpoint',
|
||||
icon: 'fas fa-cloud-upload-alt',
|
||||
label: 'Import',
|
||||
value: EnvironmentCreationTypes.KubeConfigEnvironment,
|
||||
description: 'Import an existing Kubernetes config',
|
||||
feature: FeatureId.K8S_CREATE_FROM_KUBECONFIG,
|
||||
},
|
||||
];
|
||||
|
||||
export function WizardKubernetes({ onCreate }: Props) {
|
||||
|
|
@ -72,6 +84,15 @@ export function WizardKubernetes({ onCreate }: Props) {
|
|||
commands={[{ ...commandsTabs.k8sLinux, label: 'Linux' }]}
|
||||
/>
|
||||
);
|
||||
case EnvironmentCreationTypes.KubeConfigEnvironment:
|
||||
return (
|
||||
<div className="px-1 py-5 border border-solid border-orange-1">
|
||||
<BEFeatureIndicator
|
||||
featureId={options.find((o) => o.value === type)?.feature}
|
||||
/>
|
||||
<KubeConfigTeaserForm />
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
throw new Error('Creation type not supported');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,34 @@
|
|||
.root {
|
||||
--selected-item-color: var(--blue-2);
|
||||
display: block;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
border: 1px solid rgb(163, 163, 163);
|
||||
.optionTile {
|
||||
border-radius: 5px;
|
||||
padding: 25px 20px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 60%);
|
||||
margin: 0;
|
||||
display: block;
|
||||
width: 200px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.root:hover {
|
||||
.feature {
|
||||
--selected-item-color: var(--blue-2);
|
||||
border: 1px solid rgb(163, 163, 163);
|
||||
}
|
||||
|
||||
.feature:hover {
|
||||
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
|
||||
border: 1px solid var(--blue-2);
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
.teaser {
|
||||
border: 2px solid var(--BE-only) !important;
|
||||
color: var(--text-muted-color);
|
||||
}
|
||||
|
||||
.teaser:hover {
|
||||
box-shadow: 0 3px 10px -2px rgb(161 170 166 / 80%);
|
||||
}
|
||||
|
||||
.active:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import clsx from 'clsx';
|
||||
import { ComponentType } from 'react';
|
||||
|
||||
import { BEFeatureIndicator } from '@/portainer/components/BEFeatureIndicator';
|
||||
import { FeatureId } from '@/portainer/feature-flags/enums';
|
||||
import { isLimitedToBE } from '@/portainer/feature-flags/feature-flags.service';
|
||||
|
||||
import styles from './Option.module.css';
|
||||
|
||||
export interface SelectorItemType {
|
||||
|
|
@ -12,6 +16,7 @@ export interface SelectorItemType {
|
|||
interface Props extends SelectorItemType {
|
||||
active?: boolean;
|
||||
onClick?(): void;
|
||||
featureId?: FeatureId;
|
||||
}
|
||||
|
||||
export function Option({
|
||||
|
|
@ -20,13 +25,22 @@ export function Option({
|
|||
description,
|
||||
title,
|
||||
onClick = () => {},
|
||||
featureId,
|
||||
}: Props) {
|
||||
const Icon = typeof icon !== 'string' ? icon : null;
|
||||
|
||||
const isLimited = isLimitedToBE(featureId);
|
||||
return (
|
||||
<button
|
||||
className={clsx('border-0', styles.root, { [styles.active]: active })}
|
||||
className={clsx(
|
||||
styles.optionTile,
|
||||
isLimited ? styles.teaser : styles.feature,
|
||||
'border-0',
|
||||
{
|
||||
[styles.active]: active,
|
||||
}
|
||||
)}
|
||||
type="button"
|
||||
disabled={isLimited}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div className="text-center mt-2">
|
||||
|
|
@ -37,9 +51,16 @@ export function Option({
|
|||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-3 text-center">
|
||||
<div className="mt-3 text-center flex flex-col">
|
||||
<h3>{title}</h3>
|
||||
<h5>{description}</h5>
|
||||
{isLimited && (
|
||||
<BEFeatureIndicator
|
||||
showIcon={false}
|
||||
featureId={featureId}
|
||||
className="!whitespace-normal"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue