mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 20:35:25 +02:00
feat(helm): enhance helm chart install [r8s-341] (#766)
This commit is contained in:
Ali
GitHub
parent
caac45b834
commit
a9061e5258
29 changed files with 864 additions and 562 deletions
|
|
@ -4,11 +4,12 @@ import { vi } from 'vitest';
|
|||
|
||||
import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
|
||||
import { withTestRouter } from '@/react/test-utils/withRouter';
|
||||
import { withUserProvider } from '@/react/test-utils/withUserProvider';
|
||||
|
||||
import {
|
||||
useHelmRepoVersions,
|
||||
ChartVersion,
|
||||
} from '../queries/useHelmRepositories';
|
||||
} from '../../queries/useHelmRepositories';
|
||||
import { HelmRelease } from '../../types';
|
||||
|
||||
import { openUpgradeHelmModal } from './UpgradeHelmModal';
|
||||
|
|
@ -25,17 +26,8 @@ vi.mock('@/portainer/services/notifications', () => ({
|
|||
}));
|
||||
|
||||
// Mock the useHelmRepoVersions and useHelmRepositories hooks
|
||||
vi.mock('../queries/useHelmRepositories', () => ({
|
||||
useHelmRepoVersions: vi.fn(() => ({
|
||||
data: [
|
||||
{ Version: '1.0.0', Repo: 'stable' },
|
||||
{ Version: '1.1.0', Repo: 'stable' },
|
||||
],
|
||||
isInitialLoading: false,
|
||||
isError: false,
|
||||
isFetching: false,
|
||||
refetch: vi.fn(() => Promise.resolve([])),
|
||||
})),
|
||||
vi.mock('../../queries/useHelmRepositories', () => ({
|
||||
useHelmRepoVersions: vi.fn(),
|
||||
useHelmRepositories: vi.fn(() => ({
|
||||
data: ['repo1', 'repo2'],
|
||||
isInitialLoading: false,
|
||||
|
|
@ -43,6 +35,21 @@ vi.mock('../queries/useHelmRepositories', () => ({
|
|||
})),
|
||||
}));
|
||||
|
||||
// Mock the useHelmRelease hook
|
||||
vi.mock('../queries/useHelmRelease', () => ({
|
||||
useHelmRelease: vi.fn(() => ({
|
||||
data: '1.0.0',
|
||||
})),
|
||||
}));
|
||||
|
||||
// Mock the useUpdateHelmReleaseMutation hook
|
||||
vi.mock('../../queries/useUpdateHelmReleaseMutation', () => ({
|
||||
useUpdateHelmReleaseMutation: vi.fn(() => ({
|
||||
mutate: vi.fn(),
|
||||
isLoading: false,
|
||||
})),
|
||||
}));
|
||||
|
||||
function renderButton(props = {}) {
|
||||
const defaultProps = {
|
||||
environmentId: 1,
|
||||
|
|
@ -65,11 +72,27 @@ function renderButton(props = {}) {
|
|||
...props,
|
||||
};
|
||||
|
||||
const Wrapped = withTestQueryProvider(withTestRouter(UpgradeButton));
|
||||
const Wrapped = withTestQueryProvider(
|
||||
withUserProvider(withTestRouter(UpgradeButton))
|
||||
);
|
||||
return render(<Wrapped {...defaultProps} />);
|
||||
}
|
||||
|
||||
describe('UpgradeButton', () => {
|
||||
beforeEach(() => {
|
||||
// Set up default mock return values
|
||||
vi.mocked(useHelmRepoVersions).mockReturnValue({
|
||||
data: [
|
||||
{ Version: '1.0.0', Repo: 'stable' },
|
||||
{ Version: '1.1.0', Repo: 'stable' },
|
||||
],
|
||||
isInitialLoading: false,
|
||||
isError: false,
|
||||
isFetching: false,
|
||||
refetch: vi.fn(() => Promise.resolve([])),
|
||||
});
|
||||
});
|
||||
|
||||
test('should display the upgrade button', () => {
|
||||
renderButton();
|
||||
|
||||
|
|
|
|||
|
|
@ -6,21 +6,17 @@ import { EnvironmentId } from '@/react/portainer/environments/types';
|
|||
import { notifySuccess } from '@/portainer/services/notifications';
|
||||
import { semverCompare } from '@/react/common/semver-utils';
|
||||
|
||||
import { LoadingButton } from '@@/buttons';
|
||||
import { Button, LoadingButton } from '@@/buttons';
|
||||
import { InlineLoader } from '@@/InlineLoader';
|
||||
import { Tooltip } from '@@/Tip/Tooltip';
|
||||
import { Link } from '@@/Link';
|
||||
|
||||
import { HelmRelease } from '../../types';
|
||||
import { HelmRelease, UpdateHelmReleasePayload } from '../../types';
|
||||
import { useUpdateHelmReleaseMutation } from '../../queries/useUpdateHelmReleaseMutation';
|
||||
import {
|
||||
useUpdateHelmReleaseMutation,
|
||||
UpdateHelmReleasePayload,
|
||||
} from '../queries/useUpdateHelmReleaseMutation';
|
||||
import {
|
||||
ChartVersion,
|
||||
useHelmRepoVersions,
|
||||
useHelmRepositories,
|
||||
} from '../queries/useHelmRepositories';
|
||||
} from '../../queries/useHelmRepositories';
|
||||
import { useHelmRelease } from '../queries/useHelmRelease';
|
||||
|
||||
import { openUpgradeHelmModal } from './UpgradeHelmModal';
|
||||
|
|
@ -39,10 +35,10 @@ export function UpgradeButton({
|
|||
updateRelease: (release: HelmRelease) => void;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [useCache, setUseCache] = useState(true);
|
||||
const updateHelmReleaseMutation = useUpdateHelmReleaseMutation(environmentId);
|
||||
|
||||
const repositoriesQuery = useHelmRepositories();
|
||||
const [useCache, setUseCache] = useState(true);
|
||||
const helmRepoVersionsQuery = useHelmRepoVersions(
|
||||
release?.chart.metadata?.name || '',
|
||||
60 * 60 * 1000, // 1 hour
|
||||
|
|
@ -50,43 +46,42 @@ export function UpgradeButton({
|
|||
useCache
|
||||
);
|
||||
const versions = helmRepoVersionsQuery.data;
|
||||
const repo = versions?.[0]?.Repo;
|
||||
|
||||
// Combined loading state
|
||||
const isLoading =
|
||||
repositoriesQuery.isInitialLoading || helmRepoVersionsQuery.isFetching;
|
||||
repositoriesQuery.isInitialLoading || helmRepoVersionsQuery.isFetching; // use 'isFetching' for helmRepoVersionsQuery because we want to show when it's refetching
|
||||
const isError = repositoriesQuery.isError || helmRepoVersionsQuery.isError;
|
||||
|
||||
const latestVersion = useHelmRelease(environmentId, releaseName, namespace, {
|
||||
select: (data) => data.chart.metadata?.version,
|
||||
});
|
||||
const latestVersionQuery = useHelmRelease(
|
||||
environmentId,
|
||||
releaseName,
|
||||
namespace,
|
||||
{
|
||||
select: (data) => data.chart.metadata?.version,
|
||||
}
|
||||
);
|
||||
const latestVersionAvailable = versions[0]?.Version ?? '';
|
||||
const isNewVersionAvailable = Boolean(
|
||||
latestVersion?.data &&
|
||||
semverCompare(latestVersionAvailable, latestVersion?.data) === 1
|
||||
latestVersionQuery?.data &&
|
||||
semverCompare(latestVersionAvailable, latestVersionQuery?.data) === 1
|
||||
);
|
||||
const currentVersion = release?.chart.metadata?.version;
|
||||
|
||||
const editableHelmRelease: UpdateHelmReleasePayload = {
|
||||
name: releaseName,
|
||||
namespace: namespace || '',
|
||||
values: release?.values?.userSuppliedValues,
|
||||
chart: release?.chart.metadata?.name || '',
|
||||
version: release?.chart.metadata?.version,
|
||||
version: currentVersion,
|
||||
repo,
|
||||
};
|
||||
|
||||
function handleRefreshVersions() {
|
||||
if (!useCache) {
|
||||
helmRepoVersionsQuery.refetch();
|
||||
} else {
|
||||
setUseCache(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<LoadingButton
|
||||
color="secondary"
|
||||
data-cy="k8sApp-upgradeHelmChartButton"
|
||||
onClick={() => openUpgradeForm(versions, release)}
|
||||
onClick={handleUpgrade}
|
||||
disabled={
|
||||
versions.length === 0 ||
|
||||
isLoading ||
|
||||
|
|
@ -133,68 +128,75 @@ export function UpgradeButton({
|
|||
}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
<Button
|
||||
data-cy="k8sApp-refreshHelmChartVersionsButton"
|
||||
color="link"
|
||||
size="xsmall"
|
||||
onClick={handleRefreshVersions}
|
||||
className="text-primary hover:text-primary-light cursor-pointer bg-transparent border-0 pl-1 p-0"
|
||||
type="button"
|
||||
>
|
||||
Refresh versions
|
||||
</button>
|
||||
Refresh
|
||||
</Button>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
async function openUpgradeForm(
|
||||
versions: ChartVersion[],
|
||||
release?: HelmRelease
|
||||
) {
|
||||
const result = await openUpgradeHelmModal(editableHelmRelease, versions);
|
||||
|
||||
if (result) {
|
||||
handleUpgrade(result, release);
|
||||
function handleRefreshVersions() {
|
||||
if (useCache) {
|
||||
// clicking 'refresh versions' should get the latest versions from the repo, not the cached versions
|
||||
setUseCache(false);
|
||||
}
|
||||
helmRepoVersionsQuery.refetch();
|
||||
}
|
||||
|
||||
function handleUpgrade(
|
||||
payload: UpdateHelmReleasePayload,
|
||||
release?: HelmRelease
|
||||
) {
|
||||
if (release?.info) {
|
||||
const updatedRelease = {
|
||||
...release,
|
||||
info: {
|
||||
...release.info,
|
||||
status: 'pending-upgrade',
|
||||
description: 'Preparing upgrade',
|
||||
async function handleUpgrade() {
|
||||
const submittedUpgradeValues = await openUpgradeHelmModal(
|
||||
editableHelmRelease,
|
||||
versions
|
||||
);
|
||||
|
||||
if (submittedUpgradeValues) {
|
||||
upgrade(submittedUpgradeValues, release);
|
||||
}
|
||||
|
||||
function upgrade(payload: UpdateHelmReleasePayload, release?: HelmRelease) {
|
||||
if (release?.info) {
|
||||
const updatedRelease = {
|
||||
...release,
|
||||
info: {
|
||||
...release.info,
|
||||
status: 'pending-upgrade',
|
||||
description: 'Preparing upgrade',
|
||||
},
|
||||
};
|
||||
updateRelease(updatedRelease);
|
||||
}
|
||||
updateHelmReleaseMutation.mutate(payload, {
|
||||
onSuccess: () => {
|
||||
notifySuccess('Success', 'Helm chart upgraded successfully');
|
||||
// set the revision url param to undefined to refresh the page at the latest revision
|
||||
router.stateService.go('kubernetes.helm', {
|
||||
namespace,
|
||||
name: releaseName,
|
||||
revision: undefined,
|
||||
});
|
||||
},
|
||||
};
|
||||
updateRelease(updatedRelease);
|
||||
});
|
||||
}
|
||||
updateHelmReleaseMutation.mutate(payload, {
|
||||
onSuccess: () => {
|
||||
notifySuccess('Success', 'Helm chart upgraded successfully');
|
||||
// set the revision url param to undefined to refresh the page at the latest revision
|
||||
router.stateService.go('kubernetes.helm', {
|
||||
namespace,
|
||||
name: releaseName,
|
||||
revision: undefined,
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function getStatusMessage(
|
||||
hasNoAvailableVersions: boolean,
|
||||
latestVersionAvailable: string,
|
||||
isNewVersionAvailable: boolean
|
||||
): string {
|
||||
if (hasNoAvailableVersions) {
|
||||
return 'No versions available ';
|
||||
}
|
||||
if (isNewVersionAvailable) {
|
||||
return `New version available (${latestVersionAvailable}) `;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusMessage(
|
||||
hasNoAvailableVersions: boolean,
|
||||
latestVersionAvailable: string,
|
||||
isNewVersionAvailable: boolean
|
||||
) {
|
||||
if (hasNoAvailableVersions) {
|
||||
return 'No versions available ';
|
||||
}
|
||||
if (isNewVersionAvailable) {
|
||||
return `New version available (${latestVersionAvailable}) `;
|
||||
}
|
||||
return 'Latest version installed';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,26 +3,35 @@ import { ArrowUp } from 'lucide-react';
|
|||
|
||||
import { withReactQuery } from '@/react-tools/withReactQuery';
|
||||
import { withCurrentUser } from '@/react-tools/withCurrentUser';
|
||||
import { ChartVersion } from '@/react/kubernetes/helm/queries/useHelmRepositories';
|
||||
|
||||
import { Modal, OnSubmit, openModal } from '@@/modals';
|
||||
import { Button } from '@@/buttons';
|
||||
import { Option, PortainerSelect } from '@@/form-components/PortainerSelect';
|
||||
import { Input } from '@@/form-components/Input';
|
||||
import { CodeEditor } from '@@/CodeEditor';
|
||||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { WidgetTitle } from '@@/Widget';
|
||||
import { Checkbox } from '@@/form-components/Checkbox';
|
||||
import { Option, PortainerSelect } from '@@/form-components/PortainerSelect';
|
||||
|
||||
import { UpdateHelmReleasePayload } from '../queries/useUpdateHelmReleaseMutation';
|
||||
import { ChartVersion } from '../queries/useHelmRepositories';
|
||||
import { UpdateHelmReleasePayload } from '../../types';
|
||||
import { HelmValuesInput } from '../../components/HelmValuesInput';
|
||||
import { useHelmChartValues } from '../../queries/useHelmChartValues';
|
||||
|
||||
interface Props {
|
||||
onSubmit: OnSubmit<UpdateHelmReleasePayload>;
|
||||
values: UpdateHelmReleasePayload;
|
||||
versions: ChartVersion[];
|
||||
chartName: string;
|
||||
repo: string;
|
||||
}
|
||||
|
||||
export function UpgradeHelmModal({ values, versions, onSubmit }: Props) {
|
||||
export function UpgradeHelmModal({
|
||||
values,
|
||||
versions,
|
||||
onSubmit,
|
||||
chartName,
|
||||
repo,
|
||||
}: Props) {
|
||||
const versionOptions: Option<ChartVersion>[] = versions.map((version) => {
|
||||
const isCurrentVersion = version.Version === values.version;
|
||||
const label = `${version.Repo}@${version.Version}${
|
||||
|
|
@ -38,11 +47,18 @@ export function UpgradeHelmModal({ values, versions, onSubmit }: Props) {
|
|||
versionOptions[0]?.value;
|
||||
const [version, setVersion] = useState<ChartVersion>(defaultVersion);
|
||||
const [userValues, setUserValues] = useState<string>(values.values || '');
|
||||
const [atomic, setAtomic] = useState<boolean>(false);
|
||||
const [atomic, setAtomic] = useState<boolean>(true);
|
||||
|
||||
const chartValuesRefQuery = useHelmChartValues({
|
||||
chart: chartName,
|
||||
repo,
|
||||
version: version.Version,
|
||||
});
|
||||
|
||||
return (
|
||||
<Modal
|
||||
onDismiss={() => onSubmit()}
|
||||
size="lg"
|
||||
size="xl"
|
||||
className="flex flex-col h-[80vh] px-0"
|
||||
aria-label="upgrade-helm"
|
||||
>
|
||||
|
|
@ -51,73 +67,65 @@ export function UpgradeHelmModal({ values, versions, onSubmit }: Props) {
|
|||
/>
|
||||
<div className="flex-1 overflow-y-auto px-5">
|
||||
<Modal.Body>
|
||||
<FormControl label="Version" inputId="version-input" size="vertical">
|
||||
<PortainerSelect<ChartVersion>
|
||||
value={version}
|
||||
options={versionOptions}
|
||||
onChange={(version) => {
|
||||
if (version) {
|
||||
setVersion(version);
|
||||
}
|
||||
}}
|
||||
data-cy="helm-version-input"
|
||||
<div className="form-horizontal">
|
||||
<FormControl
|
||||
label="Release name"
|
||||
inputId="release-name-input"
|
||||
size="medium"
|
||||
>
|
||||
<Input
|
||||
id="release-name-input"
|
||||
value={values.name}
|
||||
readOnly
|
||||
disabled
|
||||
data-cy="helm-release-name-input"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
label="Namespace"
|
||||
inputId="namespace-input"
|
||||
size="medium"
|
||||
>
|
||||
<Input
|
||||
id="namespace-input"
|
||||
value={values.namespace}
|
||||
readOnly
|
||||
disabled
|
||||
data-cy="helm-namespace-input"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl label="Version" inputId="version-input" size="medium">
|
||||
<PortainerSelect<ChartVersion>
|
||||
value={version}
|
||||
options={versionOptions}
|
||||
onChange={(version) => {
|
||||
if (version) {
|
||||
setVersion(version);
|
||||
}
|
||||
}}
|
||||
data-cy="helm-version-input"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
label="Rollback on failure"
|
||||
tooltip="Enables automatic rollback on failure (equivalent to the helm --atomic flag). It may increase the time to upgrade."
|
||||
inputId="atomic-input"
|
||||
size="medium"
|
||||
>
|
||||
<Checkbox
|
||||
id="atomic-input"
|
||||
checked={atomic}
|
||||
data-cy="atomic-checkbox"
|
||||
onChange={(e) => setAtomic(e.target.checked)}
|
||||
/>
|
||||
</FormControl>
|
||||
<HelmValuesInput
|
||||
values={userValues}
|
||||
setValues={setUserValues}
|
||||
valuesRef={chartValuesRefQuery.data?.values ?? ''}
|
||||
isValuesRefLoading={chartValuesRefQuery.isInitialLoading}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
label="Release name"
|
||||
inputId="release-name-input"
|
||||
size="vertical"
|
||||
>
|
||||
<Input
|
||||
id="release-name-input"
|
||||
value={values.name}
|
||||
readOnly
|
||||
disabled
|
||||
data-cy="helm-release-name-input"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
label="Namespace"
|
||||
inputId="namespace-input"
|
||||
size="vertical"
|
||||
>
|
||||
<Input
|
||||
id="namespace-input"
|
||||
value={values.namespace}
|
||||
readOnly
|
||||
disabled
|
||||
data-cy="helm-namespace-input"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
label="Rollback on failure"
|
||||
tooltip="Enables automatic rollback on failure (equivalent to the helm --atomic flag). It may increase the time to upgrade."
|
||||
inputId="atomic-input"
|
||||
className="[&>label]:!pl-0"
|
||||
size="medium"
|
||||
>
|
||||
<Checkbox
|
||||
id="atomic-input"
|
||||
checked={atomic}
|
||||
data-cy="atomic-checkbox"
|
||||
onChange={(e) => setAtomic(e.target.checked)}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
label="User-defined values"
|
||||
inputId="user-values-editor"
|
||||
size="vertical"
|
||||
>
|
||||
<CodeEditor
|
||||
id="user-values-editor"
|
||||
value={userValues}
|
||||
onChange={(value) => setUserValues(value)}
|
||||
height="50vh"
|
||||
type="yaml"
|
||||
data-cy="helm-user-values-editor"
|
||||
placeholder="Define or paste the content of your values yaml file here"
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
</Modal.Body>
|
||||
</div>
|
||||
<div className="px-5 border-solid border-0 border-t border-gray-5 th-dark:border-gray-7 th-highcontrast:border-white">
|
||||
|
|
@ -163,5 +171,7 @@ export async function openUpgradeHelmModal(
|
|||
return openModal(withReactQuery(withCurrentUser(UpgradeHelmModal)), {
|
||||
values,
|
||||
versions,
|
||||
chartName: values.chart,
|
||||
repo: values.repo ?? '',
|
||||
});
|
||||
}
|
||||
|
|
|
|||
174
app/react/kubernetes/helm/HelmTemplates/HelmInstallForm.test.tsx
Normal file
174
app/react/kubernetes/helm/HelmTemplates/HelmInstallForm.test.tsx
Normal file
|
|
@ -0,0 +1,174 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { vi } from 'vitest';
|
||||
|
||||
import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
|
||||
import { withUserProvider } from '@/react/test-utils/withUserProvider';
|
||||
import { withTestRouter } from '@/react/test-utils/withRouter';
|
||||
import { UserViewModel } from '@/portainer/models/user';
|
||||
|
||||
import { Chart } from '../types';
|
||||
|
||||
import { HelmInstallForm } from './HelmInstallForm';
|
||||
|
||||
const mockMutate = vi.fn();
|
||||
const mockNotifySuccess = vi.fn();
|
||||
const mockTrackEvent = vi.fn();
|
||||
const mockRouterGo = vi.fn();
|
||||
|
||||
// Mock the router hook to provide endpointId
|
||||
vi.mock('@uirouter/react', async (importOriginal: () => Promise<object>) => ({
|
||||
...(await importOriginal()),
|
||||
useCurrentStateAndParams: vi.fn(() => ({
|
||||
params: { endpointId: '1' },
|
||||
})),
|
||||
useRouter: vi.fn(() => ({
|
||||
stateService: {
|
||||
go: vi.fn((...args) => mockRouterGo(...args)),
|
||||
},
|
||||
})),
|
||||
}));
|
||||
|
||||
// Mock dependencies
|
||||
vi.mock('@/portainer/services/notifications', () => ({
|
||||
notifySuccess: vi.fn((title: string, text: string) =>
|
||||
mockNotifySuccess(title, text)
|
||||
),
|
||||
}));
|
||||
|
||||
vi.mock('../queries/useUpdateHelmReleaseMutation', () => ({
|
||||
useUpdateHelmReleaseMutation: vi.fn(() => ({
|
||||
mutateAsync: vi.fn((...args) => mockMutate(...args)),
|
||||
isLoading: false,
|
||||
})),
|
||||
}));
|
||||
|
||||
vi.mock('../queries/useHelmRepositories', () => ({
|
||||
useHelmRepoVersions: vi.fn(() => ({
|
||||
data: [
|
||||
{ Version: '1.0.0', AppVersion: '1.0.0' },
|
||||
{ Version: '0.9.0', AppVersion: '0.9.0' },
|
||||
],
|
||||
isInitialLoading: false,
|
||||
})),
|
||||
}));
|
||||
|
||||
vi.mock('./queries/useHelmChartValues', () => ({
|
||||
useHelmChartValues: vi.fn().mockReturnValue({
|
||||
data: { values: 'test-values' },
|
||||
isInitialLoading: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock('@/react/hooks/useAnalytics', () => ({
|
||||
useAnalytics: vi.fn().mockReturnValue({
|
||||
trackEvent: vi.fn((...args) => mockTrackEvent(...args)),
|
||||
}),
|
||||
}));
|
||||
|
||||
// Sample test data
|
||||
const mockChart: Chart = {
|
||||
name: 'test-chart',
|
||||
description: 'Test Chart Description',
|
||||
repo: 'https://example.com',
|
||||
icon: 'test-icon-url',
|
||||
annotations: {
|
||||
category: 'database',
|
||||
},
|
||||
};
|
||||
|
||||
const mockRouterStateService = {
|
||||
go: vi.fn(),
|
||||
};
|
||||
|
||||
function renderComponent({
|
||||
selectedChart = mockChart,
|
||||
namespace = 'test-namespace',
|
||||
name = 'test-name',
|
||||
isAdmin = true,
|
||||
} = {}) {
|
||||
const user = new UserViewModel({ Username: 'user', Role: isAdmin ? 1 : 2 });
|
||||
|
||||
const Wrapped = withTestQueryProvider(
|
||||
withUserProvider(
|
||||
withTestRouter(() => (
|
||||
<HelmInstallForm
|
||||
selectedChart={selectedChart}
|
||||
namespace={namespace}
|
||||
name={name}
|
||||
/>
|
||||
)),
|
||||
user
|
||||
)
|
||||
);
|
||||
|
||||
return {
|
||||
...render(<Wrapped />),
|
||||
user,
|
||||
mockRouterStateService,
|
||||
};
|
||||
}
|
||||
|
||||
describe('HelmInstallForm', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it('should render the form with version selector and values editor', async () => {
|
||||
renderComponent();
|
||||
|
||||
expect(screen.getByText('Version')).toBeInTheDocument();
|
||||
expect(screen.getByText('Install')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should install helm chart when install button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
renderComponent();
|
||||
|
||||
const installButton = screen.getByText('Install');
|
||||
await user.click(installButton);
|
||||
|
||||
// Check mutate was called with correct values
|
||||
expect(mockMutate).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
name: 'test-name',
|
||||
repo: 'https://example.com',
|
||||
chart: 'test-chart',
|
||||
values: '',
|
||||
namespace: 'test-namespace',
|
||||
version: '1.0.0',
|
||||
}),
|
||||
expect.objectContaining({ onSuccess: expect.any(Function) })
|
||||
);
|
||||
});
|
||||
|
||||
it('should disable install button when namespace or name is undefined', () => {
|
||||
renderComponent({ namespace: '' });
|
||||
expect(screen.getByText('Install')).toBeDisabled();
|
||||
});
|
||||
|
||||
it('should call success handlers when installation succeeds', async () => {
|
||||
const user = userEvent.setup();
|
||||
renderComponent();
|
||||
|
||||
const installButton = screen.getByText('Install');
|
||||
await user.click(installButton);
|
||||
|
||||
// Get the onSuccess callback and call it
|
||||
const onSuccessCallback = mockMutate.mock.calls[0][1].onSuccess;
|
||||
onSuccessCallback();
|
||||
|
||||
// Check that success handlers were called
|
||||
expect(mockTrackEvent).toHaveBeenCalledWith('kubernetes-helm-install', {
|
||||
category: 'kubernetes',
|
||||
metadata: {
|
||||
'chart-name': 'test-chart',
|
||||
},
|
||||
});
|
||||
expect(mockNotifySuccess).toHaveBeenCalledWith(
|
||||
'Success',
|
||||
'Helm chart successfully installed'
|
||||
);
|
||||
expect(mockRouterGo).toHaveBeenCalledWith('kubernetes.applications');
|
||||
});
|
||||
});
|
||||
106
app/react/kubernetes/helm/HelmTemplates/HelmInstallForm.tsx
Normal file
106
app/react/kubernetes/helm/HelmTemplates/HelmInstallForm.tsx
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
import { useRef } from 'react';
|
||||
import { Formik, FormikProps } from 'formik';
|
||||
import { useRouter } from '@uirouter/react';
|
||||
|
||||
import { notifySuccess } from '@/portainer/services/notifications';
|
||||
import { useAnalytics } from '@/react/hooks/useAnalytics';
|
||||
import { useCanExit } from '@/react/hooks/useCanExit';
|
||||
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
|
||||
|
||||
import { confirmGenericDiscard } from '@@/modals/confirm';
|
||||
import { Option } from '@@/form-components/PortainerSelect';
|
||||
|
||||
import { Chart } from '../types';
|
||||
import {
|
||||
ChartVersion,
|
||||
useHelmRepoVersions,
|
||||
} from '../queries/useHelmRepositories';
|
||||
import { useUpdateHelmReleaseMutation } from '../queries/useUpdateHelmReleaseMutation';
|
||||
|
||||
import { HelmInstallInnerForm } from './HelmInstallInnerForm';
|
||||
import { HelmInstallFormValues } from './types';
|
||||
|
||||
type Props = {
|
||||
selectedChart: Chart;
|
||||
namespace?: string;
|
||||
name?: string;
|
||||
};
|
||||
|
||||
export function HelmInstallForm({ selectedChart, namespace, name }: Props) {
|
||||
const environmentId = useEnvironmentId();
|
||||
const router = useRouter();
|
||||
const analytics = useAnalytics();
|
||||
const helmRepoVersionsQuery = useHelmRepoVersions(
|
||||
selectedChart.name,
|
||||
60 * 60 * 1000, // 1 hour
|
||||
[selectedChart.repo],
|
||||
false
|
||||
);
|
||||
const versions = helmRepoVersionsQuery.data;
|
||||
const versionOptions: Option<ChartVersion>[] = versions.map(
|
||||
(version, index) => ({
|
||||
label: index === 0 ? `${version.Version} (latest)` : version.Version,
|
||||
value: version,
|
||||
})
|
||||
);
|
||||
const defaultVersion = versionOptions[0]?.value;
|
||||
const initialValues: HelmInstallFormValues = {
|
||||
values: '',
|
||||
version: defaultVersion?.Version ?? '',
|
||||
};
|
||||
|
||||
const installHelmChartMutation = useUpdateHelmReleaseMutation(environmentId);
|
||||
|
||||
const formikRef = useRef<FormikProps<HelmInstallFormValues>>(null);
|
||||
useCanExit(() => !formikRef.current?.dirty || confirmGenericDiscard());
|
||||
|
||||
return (
|
||||
<Formik
|
||||
innerRef={formikRef}
|
||||
initialValues={initialValues}
|
||||
enableReinitialize
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<HelmInstallInnerForm
|
||||
selectedChart={selectedChart}
|
||||
namespace={namespace}
|
||||
name={name}
|
||||
versionOptions={versionOptions}
|
||||
isLoadingVersions={helmRepoVersionsQuery.isInitialLoading}
|
||||
/>
|
||||
</Formik>
|
||||
);
|
||||
|
||||
async function handleSubmit(values: HelmInstallFormValues) {
|
||||
if (!name || !namespace) {
|
||||
// Theoretically this should never happen and is mainly to keep typescript happy
|
||||
return;
|
||||
}
|
||||
|
||||
await installHelmChartMutation.mutateAsync(
|
||||
{
|
||||
name,
|
||||
repo: selectedChart.repo,
|
||||
chart: selectedChart.name,
|
||||
values: values.values,
|
||||
namespace,
|
||||
version: values.version,
|
||||
},
|
||||
{
|
||||
onSuccess() {
|
||||
analytics.trackEvent('kubernetes-helm-install', {
|
||||
category: 'kubernetes',
|
||||
metadata: {
|
||||
'chart-name': selectedChart.name,
|
||||
},
|
||||
});
|
||||
notifySuccess('Success', 'Helm chart successfully installed');
|
||||
|
||||
// Reset the form so page can be navigated away from without getting "Are you sure?"
|
||||
formikRef.current?.resetForm();
|
||||
router.stateService.go('kubernetes.applications');
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
import { Form, useFormikContext } from 'formik';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { FormActions } from '@@/form-components/FormActions';
|
||||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { Option, PortainerSelect } from '@@/form-components/PortainerSelect';
|
||||
import { FormSection } from '@@/form-components/FormSection';
|
||||
|
||||
import { ChartVersion } from '../queries/useHelmRepositories';
|
||||
import { Chart } from '../types';
|
||||
import { useHelmChartValues } from '../queries/useHelmChartValues';
|
||||
import { HelmValuesInput } from '../components/HelmValuesInput';
|
||||
|
||||
import { HelmInstallFormValues } from './types';
|
||||
|
||||
type Props = {
|
||||
selectedChart: Chart;
|
||||
namespace?: string;
|
||||
name?: string;
|
||||
versionOptions: Option<ChartVersion>[];
|
||||
isLoadingVersions: boolean;
|
||||
};
|
||||
|
||||
export function HelmInstallInnerForm({
|
||||
selectedChart,
|
||||
namespace,
|
||||
name,
|
||||
versionOptions,
|
||||
isLoadingVersions,
|
||||
}: Props) {
|
||||
const { values, setFieldValue, isSubmitting } =
|
||||
useFormikContext<HelmInstallFormValues>();
|
||||
|
||||
const chartValuesRefQuery = useHelmChartValues({
|
||||
chart: selectedChart.name,
|
||||
repo: selectedChart.repo,
|
||||
version: values?.version,
|
||||
});
|
||||
|
||||
const selectedVersion = useMemo(
|
||||
() =>
|
||||
versionOptions.find((v) => v.value.Version === values.version)?.value ??
|
||||
versionOptions[0]?.value,
|
||||
[versionOptions, values.version]
|
||||
);
|
||||
|
||||
return (
|
||||
<Form className="form-horizontal">
|
||||
<div className="form-group !m-0">
|
||||
<FormSection title="Configuration" className="mt-4">
|
||||
<FormControl
|
||||
label="Version"
|
||||
inputId="version-input"
|
||||
isLoading={isLoadingVersions}
|
||||
loadingText="Loading versions..."
|
||||
>
|
||||
<PortainerSelect<ChartVersion>
|
||||
value={selectedVersion}
|
||||
options={versionOptions}
|
||||
onChange={(version) => {
|
||||
if (version) {
|
||||
setFieldValue('version', version.Version);
|
||||
}
|
||||
}}
|
||||
data-cy="helm-version-input"
|
||||
/>
|
||||
</FormControl>
|
||||
<HelmValuesInput
|
||||
values={values.values}
|
||||
setValues={(values) => setFieldValue('values', values)}
|
||||
valuesRef={chartValuesRefQuery.data?.values ?? ''}
|
||||
isValuesRefLoading={chartValuesRefQuery.isInitialLoading}
|
||||
/>
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
<FormActions
|
||||
submitLabel="Install"
|
||||
loadingText="Installing Helm chart"
|
||||
isLoading={isSubmitting}
|
||||
isValid={!!namespace && !!name}
|
||||
data-cy="helm-install"
|
||||
/>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
@ -10,6 +10,7 @@ import {
|
|||
|
||||
import { HelmTemplatesList } from './HelmTemplatesList';
|
||||
import { HelmTemplatesSelectedItem } from './HelmTemplatesSelectedItem';
|
||||
import { HelmInstallForm } from './HelmInstallForm';
|
||||
|
||||
interface Props {
|
||||
onSelectHelmChart: (chartName: string) => void;
|
||||
|
|
@ -37,12 +38,17 @@ export function HelmTemplates({ onSelectHelmChart, namespace, name }: Props) {
|
|||
<div className="row">
|
||||
<div className="col-sm-12 p-0">
|
||||
{selectedChart ? (
|
||||
<HelmTemplatesSelectedItem
|
||||
selectedChart={selectedChart}
|
||||
clearHelmChart={clearHelmChart}
|
||||
namespace={namespace}
|
||||
name={name}
|
||||
/>
|
||||
<>
|
||||
<HelmTemplatesSelectedItem
|
||||
selectedChart={selectedChart}
|
||||
clearHelmChart={clearHelmChart}
|
||||
/>
|
||||
<HelmInstallForm
|
||||
selectedChart={selectedChart}
|
||||
namespace={namespace}
|
||||
name={name}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<HelmTemplatesList
|
||||
charts={chartListQuery.data}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { MutationOptions } from '@tanstack/react-query';
|
||||
import { vi } from 'vitest';
|
||||
|
||||
import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
|
||||
|
|
@ -12,36 +10,6 @@ import { Chart } from '../types';
|
|||
|
||||
import { HelmTemplatesSelectedItem } from './HelmTemplatesSelectedItem';
|
||||
|
||||
const mockMutate = vi.fn();
|
||||
const mockNotifySuccess = vi.fn();
|
||||
|
||||
// Mock dependencies
|
||||
vi.mock('@/portainer/services/notifications', () => ({
|
||||
notifySuccess: (title: string, text: string) =>
|
||||
mockNotifySuccess(title, text),
|
||||
}));
|
||||
|
||||
vi.mock('./queries/useHelmChartValues', () => ({
|
||||
useHelmChartValues: vi.fn().mockReturnValue({
|
||||
data: { values: 'test-values' },
|
||||
isLoading: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock('./queries/useHelmChartInstall', () => ({
|
||||
useHelmChartInstall: vi.fn().mockReturnValue({
|
||||
mutate: (params: Record<string, string>, options?: MutationOptions) =>
|
||||
mockMutate(params, options),
|
||||
isLoading: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
vi.mock('@/react/hooks/useAnalytics', () => ({
|
||||
useAnalytics: vi.fn().mockReturnValue({
|
||||
trackEvent: vi.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
// Sample test data
|
||||
const mockChart: Chart = {
|
||||
name: 'test-chart',
|
||||
|
|
@ -58,22 +26,15 @@ const mockRouterStateService = {
|
|||
go: vi.fn(),
|
||||
};
|
||||
|
||||
function renderComponent({
|
||||
selectedChart = mockChart,
|
||||
clearHelmChart = clearHelmChartMock,
|
||||
namespace = 'test-namespace',
|
||||
name = 'test-name',
|
||||
} = {}) {
|
||||
const user = new UserViewModel({ Username: 'user' });
|
||||
function renderComponent({ selectedChart = mockChart, isAdmin = true } = {}) {
|
||||
const user = new UserViewModel({ Username: 'user', Role: isAdmin ? 1 : 2 });
|
||||
|
||||
const Wrapped = withTestQueryProvider(
|
||||
withUserProvider(
|
||||
withTestRouter(() => (
|
||||
<HelmTemplatesSelectedItem
|
||||
selectedChart={selectedChart}
|
||||
clearHelmChart={clearHelmChart}
|
||||
namespace={namespace}
|
||||
name={name}
|
||||
clearHelmChart={clearHelmChartMock}
|
||||
/>
|
||||
)),
|
||||
user
|
||||
|
|
@ -101,45 +62,4 @@ describe('HelmTemplatesSelectedItem', () => {
|
|||
expect(screen.getByText('Clear selection')).toBeInTheDocument();
|
||||
expect(screen.getByText('https://example.com')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should toggle custom values editor', async () => {
|
||||
renderComponent();
|
||||
const user = userEvent.setup();
|
||||
|
||||
// Verify editor is visible by default
|
||||
expect(screen.getByTestId('helm-app-creation-editor')).toBeInTheDocument();
|
||||
|
||||
// Now hide the editor
|
||||
await user.click(await screen.findByText('Custom values'));
|
||||
|
||||
// Editor should be hidden
|
||||
expect(
|
||||
screen.queryByTestId('helm-app-creation-editor')
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should install helm chart and navigate when install button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
renderComponent();
|
||||
|
||||
// Click install button
|
||||
await user.click(screen.getByText('Install'));
|
||||
|
||||
// Check mutate was called with correct values
|
||||
expect(mockMutate).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
Name: 'test-name',
|
||||
Repo: 'https://example.com',
|
||||
Chart: 'test-chart',
|
||||
Values: 'test-values',
|
||||
Namespace: 'test-namespace',
|
||||
}),
|
||||
expect.objectContaining({ onSuccess: expect.any(Function) })
|
||||
);
|
||||
});
|
||||
|
||||
it('should disable install button when namespace or name is undefined', () => {
|
||||
renderComponent({ namespace: '' });
|
||||
expect(screen.getByText('Install')).toBeDisabled();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,183 +1,58 @@
|
|||
import { useRef } from 'react';
|
||||
import { X } from 'lucide-react';
|
||||
import { Form, Formik, FormikProps } from 'formik';
|
||||
import { useRouter } from '@uirouter/react';
|
||||
|
||||
import { notifySuccess } from '@/portainer/services/notifications';
|
||||
import { useAnalytics } from '@/react/hooks/useAnalytics';
|
||||
import { useCanExit } from '@/react/hooks/useCanExit';
|
||||
|
||||
import { Widget } from '@@/Widget';
|
||||
import { Button } from '@@/buttons/Button';
|
||||
import { FallbackImage } from '@@/FallbackImage';
|
||||
import { Icon } from '@@/Icon';
|
||||
import { WebEditorForm } from '@@/WebEditorForm';
|
||||
import { confirmGenericDiscard } from '@@/modals/confirm';
|
||||
import { FormSection } from '@@/form-components/FormSection';
|
||||
import { InlineLoader } from '@@/InlineLoader';
|
||||
import { FormActions } from '@@/form-components/FormActions';
|
||||
|
||||
import { Chart } from '../types';
|
||||
|
||||
import { useHelmChartValues } from './queries/useHelmChartValues';
|
||||
import { HelmIcon } from './HelmIcon';
|
||||
import { useHelmChartInstall } from './queries/useHelmChartInstall';
|
||||
|
||||
type Props = {
|
||||
selectedChart: Chart;
|
||||
clearHelmChart: () => void;
|
||||
namespace?: string;
|
||||
name?: string;
|
||||
};
|
||||
|
||||
type FormValues = {
|
||||
values: string;
|
||||
};
|
||||
|
||||
const emptyValues: FormValues = {
|
||||
values: '',
|
||||
};
|
||||
|
||||
export function HelmTemplatesSelectedItem({
|
||||
selectedChart,
|
||||
clearHelmChart,
|
||||
namespace,
|
||||
name,
|
||||
}: Props) {
|
||||
const router = useRouter();
|
||||
const analytics = useAnalytics();
|
||||
|
||||
const { mutate: installHelmChart, isLoading: isInstalling } =
|
||||
useHelmChartInstall();
|
||||
const { data: initialValues, isLoading: loadingValues } =
|
||||
useHelmChartValues(selectedChart);
|
||||
|
||||
const formikRef = useRef<FormikProps<FormValues>>(null);
|
||||
useCanExit(() => !formikRef.current?.dirty || confirmGenericDiscard());
|
||||
|
||||
function handleSubmit(values: FormValues) {
|
||||
if (!name || !namespace) {
|
||||
// Theoretically this should never happen and is mainly to keep typescript happy
|
||||
return;
|
||||
}
|
||||
|
||||
installHelmChart(
|
||||
{
|
||||
Name: name,
|
||||
Repo: selectedChart.repo,
|
||||
Chart: selectedChart.name,
|
||||
Values: values.values,
|
||||
Namespace: namespace,
|
||||
},
|
||||
{
|
||||
onSuccess() {
|
||||
analytics.trackEvent('kubernetes-helm-install', {
|
||||
category: 'kubernetes',
|
||||
metadata: {
|
||||
'chart-name': selectedChart.name,
|
||||
},
|
||||
});
|
||||
notifySuccess('Success', 'Helm chart successfully installed');
|
||||
|
||||
// Reset the form so page can be navigated away from without getting "Are you sure?"
|
||||
formikRef.current?.resetForm();
|
||||
router.stateService.go('kubernetes.applications');
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Widget>
|
||||
<div className="flex">
|
||||
<div className="basis-3/4 rounded-[8px] m-2 bg-gray-4 th-highcontrast:bg-black th-highcontrast:text-white th-dark:bg-gray-iron-10 th-dark:text-white">
|
||||
<div className="vertical-center p-5">
|
||||
<FallbackImage
|
||||
src={selectedChart.icon}
|
||||
fallbackIcon={HelmIcon}
|
||||
className="h-16 w-16"
|
||||
/>
|
||||
<div className="col-sm-12">
|
||||
<div>
|
||||
<div className="text-2xl font-bold">{selectedChart.name}</div>
|
||||
<div className="small text-muted mt-1">
|
||||
{selectedChart.repo}
|
||||
</div>
|
||||
<Widget>
|
||||
<div className="flex">
|
||||
<div className="basis-3/4 rounded-lg m-2 bg-gray-4 th-highcontrast:bg-black th-highcontrast:text-white th-dark:bg-gray-iron-10 th-dark:text-white">
|
||||
<div className="vertical-center p-5">
|
||||
<FallbackImage
|
||||
src={selectedChart.icon}
|
||||
fallbackIcon={HelmIcon}
|
||||
className="h-16 w-16"
|
||||
/>
|
||||
<div className="col-sm-12">
|
||||
<div>
|
||||
<div className="text-2xl font-bold">{selectedChart.name}</div>
|
||||
<div className="small text-muted mt-1">
|
||||
{selectedChart.repo}
|
||||
</div>
|
||||
<div className="text-xs mt-2">{selectedChart.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="basis-1/4">
|
||||
<div className="h-full w-full vertical-center justify-end pr-5">
|
||||
<Button
|
||||
color="link"
|
||||
className="!text-gray-8 hover:no-underline th-highcontrast:!text-white th-dark:!text-white"
|
||||
onClick={clearHelmChart}
|
||||
data-cy="clear-selection"
|
||||
>
|
||||
Clear selection
|
||||
<Icon icon={X} className="ml-1" />
|
||||
</Button>
|
||||
<div className="text-xs mt-2">{selectedChart.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Widget>
|
||||
<Formik
|
||||
innerRef={formikRef}
|
||||
initialValues={initialValues ?? emptyValues}
|
||||
enableReinitialize
|
||||
onSubmit={(values) => handleSubmit(values)}
|
||||
>
|
||||
{({ values, setFieldValue }) => (
|
||||
<Form className="form-horizontal">
|
||||
<div className="form-group !m-0">
|
||||
<FormSection
|
||||
title="Custom values"
|
||||
isFoldable
|
||||
defaultFolded={false}
|
||||
className="mt-4"
|
||||
>
|
||||
{loadingValues && (
|
||||
<div className="col-sm-12 p-0">
|
||||
<InlineLoader>Loading values.yaml...</InlineLoader>
|
||||
</div>
|
||||
)}
|
||||
{!!initialValues && (
|
||||
<WebEditorForm
|
||||
id="helm-app-creation-editor"
|
||||
value={values.values}
|
||||
onChange={(value) => setFieldValue('values', value)}
|
||||
type="yaml"
|
||||
data-cy="helm-app-creation-editor"
|
||||
textTip="Define or paste the content of your values yaml file here"
|
||||
>
|
||||
You can get more information about Helm values file format
|
||||
in the{' '}
|
||||
<a
|
||||
href="https://helm.sh/docs/chart_template_guide/values_files/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
official documentation
|
||||
</a>
|
||||
.
|
||||
</WebEditorForm>
|
||||
)}
|
||||
</FormSection>
|
||||
</div>
|
||||
|
||||
<FormActions
|
||||
submitLabel="Install"
|
||||
loadingText="Installing Helm chart"
|
||||
isLoading={isInstalling}
|
||||
isValid={!!namespace && !!name && !loadingValues}
|
||||
data-cy="helm-install"
|
||||
/>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
<div className="basis-1/4">
|
||||
<div className="h-full w-full vertical-center justify-end pr-5">
|
||||
<Button
|
||||
color="link"
|
||||
className="!text-gray-8 hover:no-underline th-highcontrast:!text-white th-dark:!text-white"
|
||||
onClick={clearHelmChart}
|
||||
data-cy="clear-selection"
|
||||
>
|
||||
Clear selection
|
||||
<Icon icon={X} className="ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Widget>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
import { useMutation } from '@tanstack/react-query';
|
||||
|
||||
import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
import {
|
||||
queryClient,
|
||||
withGlobalError,
|
||||
withInvalidate,
|
||||
} from '@/react-tools/react-query';
|
||||
import { queryKeys } from '@/react/kubernetes/applications/queries/query-keys';
|
||||
|
||||
import { InstallChartPayload } from '../../types';
|
||||
|
||||
async function installHelmChart(
|
||||
payload: InstallChartPayload,
|
||||
environmentId: EnvironmentId
|
||||
) {
|
||||
try {
|
||||
const response = await axios.post(
|
||||
`endpoints/${environmentId}/kubernetes/helm`,
|
||||
payload
|
||||
);
|
||||
return response.data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err as Error, 'Installation error');
|
||||
}
|
||||
}
|
||||
|
||||
export function useHelmChartInstall() {
|
||||
const environmentId = useEnvironmentId();
|
||||
|
||||
return useMutation(
|
||||
(values: InstallChartPayload) => installHelmChart(values, environmentId),
|
||||
{
|
||||
...withGlobalError('Unable to install Helm chart'),
|
||||
...withInvalidate(queryClient, [queryKeys.applications(environmentId)]),
|
||||
}
|
||||
);
|
||||
}
|
||||
4
app/react/kubernetes/helm/HelmTemplates/types.ts
Normal file
4
app/react/kubernetes/helm/HelmTemplates/types.ts
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
export type HelmInstallFormValues = {
|
||||
values: string;
|
||||
version: string;
|
||||
};
|
||||
80
app/react/kubernetes/helm/components/HelmValuesInput.tsx
Normal file
80
app/react/kubernetes/helm/components/HelmValuesInput.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { CodeEditor } from '@@/CodeEditor';
|
||||
import { ShortcutsTooltip } from '@@/CodeEditor/ShortcutsTooltip';
|
||||
|
||||
type Props = {
|
||||
values: string;
|
||||
setValues: (values: string) => void;
|
||||
valuesRef: string;
|
||||
isValuesRefLoading: boolean;
|
||||
};
|
||||
|
||||
export function HelmValuesInput({
|
||||
values,
|
||||
setValues,
|
||||
valuesRef,
|
||||
isValuesRefLoading,
|
||||
}: Props) {
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormControl
|
||||
label="User-defined values"
|
||||
inputId="user-values-editor"
|
||||
size="vertical"
|
||||
className="[&>label]:!mb-1 !mx-0"
|
||||
tooltip={
|
||||
<>
|
||||
User-defined values will override the default chart values.
|
||||
<br />
|
||||
You can get more information about the Helm values file format in
|
||||
the{' '}
|
||||
<a
|
||||
href="https://helm.sh/docs/chart_template_guide/values_files/"
|
||||
target="_blank"
|
||||
data-cy="helm-values-reference-link"
|
||||
rel="noreferrer"
|
||||
>
|
||||
official documentation
|
||||
</a>
|
||||
.
|
||||
</>
|
||||
}
|
||||
>
|
||||
<CodeEditor
|
||||
id="user-values-editor"
|
||||
value={values}
|
||||
onChange={setValues}
|
||||
height="50vh"
|
||||
type="yaml"
|
||||
data-cy="helm-user-values-editor"
|
||||
placeholder="Define or paste the content of your values yaml file here"
|
||||
showToolbar={false}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
label={
|
||||
<div className="flex justify-between w-full">
|
||||
Values reference (read-only)
|
||||
<ShortcutsTooltip />
|
||||
</div>
|
||||
}
|
||||
inputId="values-reference"
|
||||
size="vertical"
|
||||
isLoading={isValuesRefLoading}
|
||||
loadingText="Loading values..."
|
||||
className="[&>label]:w-full [&>label]:!mb-1 !mx-0"
|
||||
>
|
||||
<CodeEditor
|
||||
id="values-reference"
|
||||
value={valuesRef}
|
||||
height="50vh"
|
||||
type="yaml"
|
||||
readonly
|
||||
data-cy="helm-values-reference"
|
||||
placeholder="No values reference found"
|
||||
showToolbar={false}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,15 +3,16 @@ import { useQuery } from '@tanstack/react-query';
|
|||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { withGlobalError } from '@/react-tools/react-query';
|
||||
|
||||
import { Chart } from '../../types';
|
||||
type Params = {
|
||||
chart: string;
|
||||
repo: string;
|
||||
version?: string;
|
||||
};
|
||||
|
||||
async function getHelmChartValues(chart: string, repo: string) {
|
||||
async function getHelmChartValues(params: Params) {
|
||||
try {
|
||||
const response = await axios.get<string>(`/templates/helm/values`, {
|
||||
params: {
|
||||
repo,
|
||||
chart,
|
||||
},
|
||||
params,
|
||||
});
|
||||
return response.data;
|
||||
} catch (err) {
|
||||
|
|
@ -19,14 +20,15 @@ async function getHelmChartValues(chart: string, repo: string) {
|
|||
}
|
||||
}
|
||||
|
||||
export function useHelmChartValues(chart: Chart) {
|
||||
export function useHelmChartValues(params: Params) {
|
||||
return useQuery({
|
||||
queryKey: ['helm-chart-values', chart.repo, chart.name],
|
||||
queryFn: () => getHelmChartValues(chart.name, chart.repo),
|
||||
enabled: !!chart.name,
|
||||
queryKey: ['helm-chart-values', params.repo, params.chart, params.version],
|
||||
queryFn: () => getHelmChartValues(params),
|
||||
enabled: !!params.chart && !!params.repo,
|
||||
select: (data) => ({
|
||||
values: data,
|
||||
}),
|
||||
staleTime: 60 * 1000 * 20, // 60 minutes, because values are not expected to change often
|
||||
...withGlobalError('Unable to get Helm chart values'),
|
||||
});
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { withGlobalError } from '@/react-tools/react-query';
|
|||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { useCurrentUser } from '@/react/hooks/useUser';
|
||||
|
||||
import { getHelmRepositories } from '../../queries/useHelmChartList';
|
||||
import { getHelmRepositories } from './useHelmChartList';
|
||||
|
||||
interface HelmSearch {
|
||||
entries: Entries;
|
||||
|
|
@ -5,17 +5,8 @@ import { withGlobalError, withInvalidate } from '@/react-tools/react-query';
|
|||
import { queryKeys as applicationsQueryKeys } from '@/react/kubernetes/applications/queries/query-keys';
|
||||
import { EnvironmentId } from '@/react/portainer/environments/types';
|
||||
|
||||
import { HelmRelease } from '../../types';
|
||||
import { HelmRelease, UpdateHelmReleasePayload } from '../types';
|
||||
|
||||
export interface UpdateHelmReleasePayload {
|
||||
namespace: string;
|
||||
values?: string;
|
||||
repo?: string;
|
||||
name: string;
|
||||
chart: string;
|
||||
version?: string;
|
||||
atomic?: boolean;
|
||||
}
|
||||
export function useUpdateHelmReleaseMutation(environmentId: EnvironmentId) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
|
|
@ -112,4 +112,15 @@ export interface InstallChartPayload {
|
|||
Chart: string;
|
||||
Values: string;
|
||||
Namespace: string;
|
||||
Version?: string;
|
||||
}
|
||||
|
||||
export interface UpdateHelmReleasePayload {
|
||||
namespace: string;
|
||||
values?: string;
|
||||
repo?: string;
|
||||
name: string;
|
||||
chart: string;
|
||||
version?: string;
|
||||
atomic?: boolean;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue