mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 20:35:25 +02:00
feat(oci): oci helm support [r8s-361] (#787)
This commit is contained in:
Ali
GitHub
parent
b6a6ce9aaf
commit
2697d6c5d7
80 changed files with 4264 additions and 812 deletions
|
|
@ -39,11 +39,6 @@ export function ChartActions({
|
|||
release={release}
|
||||
updateRelease={updateRelease}
|
||||
/>
|
||||
<UninstallButton
|
||||
environmentId={environmentId}
|
||||
releaseName={releaseName}
|
||||
namespace={namespace}
|
||||
/>
|
||||
{showRollbackButton && (
|
||||
<RollbackButton
|
||||
latestRevision={latestRevision}
|
||||
|
|
@ -53,6 +48,11 @@ export function ChartActions({
|
|||
namespace={namespace}
|
||||
/>
|
||||
)}
|
||||
<UninstallButton
|
||||
environmentId={environmentId}
|
||||
releaseName={releaseName}
|
||||
namespace={namespace}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@ vi.mock('@/portainer/services/notifications', () => ({
|
|||
notifySuccess: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../../queries/useHelmRegistries', () => ({
|
||||
useHelmRegistries: vi.fn(() => ({
|
||||
vi.mock('../../queries/useHelmRepositories', () => ({
|
||||
useUserHelmRepositories: vi.fn(() => ({
|
||||
data: ['repo1', 'repo2'],
|
||||
isInitialLoading: false,
|
||||
isError: false,
|
||||
|
|
@ -146,7 +146,7 @@ describe('UpgradeButton', () => {
|
|||
|
||||
renderButton();
|
||||
|
||||
expect(screen.getByText('No versions available')).toBeInTheDocument();
|
||||
expect(screen.getByText(/No versions available/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('should open upgrade modal when clicked', async () => {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { HelmRelease, UpdateHelmReleasePayload } from '../../types';
|
|||
import { useUpdateHelmReleaseMutation } from '../../queries/useUpdateHelmReleaseMutation';
|
||||
import { useHelmRepoVersions } from '../../queries/useHelmRepoVersions';
|
||||
import { useHelmRelease } from '../queries/useHelmRelease';
|
||||
import { useHelmRegistries } from '../../queries/useHelmRegistries';
|
||||
import { useUserHelmRepositories } from '../../queries/useHelmRepositories';
|
||||
|
||||
import { openUpgradeHelmModal } from './UpgradeHelmModal';
|
||||
|
||||
|
|
@ -36,19 +36,22 @@ export function UpgradeButton({
|
|||
const [useCache, setUseCache] = useState(true);
|
||||
const updateHelmReleaseMutation = useUpdateHelmReleaseMutation(environmentId);
|
||||
|
||||
const registriesQuery = useHelmRegistries();
|
||||
const userRepositoriesQuery = useUserHelmRepositories();
|
||||
const helmRepoVersionsQuery = useHelmRepoVersions(
|
||||
release?.chart.metadata?.name || '',
|
||||
60 * 60 * 1000, // 1 hour
|
||||
registriesQuery.data,
|
||||
userRepositoriesQuery.data?.map((repo) => ({
|
||||
repo,
|
||||
})),
|
||||
useCache
|
||||
);
|
||||
const versions = helmRepoVersionsQuery.data;
|
||||
|
||||
// Combined loading state
|
||||
const isLoading =
|
||||
registriesQuery.isInitialLoading || helmRepoVersionsQuery.isFetching; // use 'isFetching' for helmRepoVersionsQuery because we want to show when it's refetching
|
||||
const isError = registriesQuery.isError || helmRepoVersionsQuery.isError;
|
||||
userRepositoriesQuery.isInitialLoading || helmRepoVersionsQuery.isFetching; // use 'isFetching' for helmRepoVersionsQuery because we want to show when it's refetching
|
||||
const isError =
|
||||
userRepositoriesQuery.isError || helmRepoVersionsQuery.isError;
|
||||
const latestVersionQuery = useHelmRelease(
|
||||
environmentId,
|
||||
releaseName,
|
||||
|
|
@ -101,7 +104,7 @@ export function UpgradeButton({
|
|||
icon={ArrowUp}
|
||||
size="medium"
|
||||
>
|
||||
Upgrade
|
||||
Edit/Upgrade
|
||||
</LoadingButton>
|
||||
{isLoading && (
|
||||
<InlineLoader
|
||||
|
|
|
|||
|
|
@ -137,6 +137,47 @@ const helmReleaseHistory = [
|
|||
},
|
||||
];
|
||||
|
||||
// Common MSW handlers for all tests
|
||||
function createCommonHandlers() {
|
||||
return [
|
||||
http.get('/api/users/undefined/helm/repositories', () =>
|
||||
HttpResponse.json({
|
||||
GlobalRepository: 'https://charts.helm.sh/stable',
|
||||
UserRepositories: [{ Id: '1', URL: 'https://charts.helm.sh/stable' }],
|
||||
})
|
||||
),
|
||||
http.get('/api/templates/helm', () =>
|
||||
HttpResponse.json({
|
||||
entries: {
|
||||
'test-chart': [{ version: '1.0.0' }],
|
||||
},
|
||||
})
|
||||
),
|
||||
http.get('/api/endpoints/3/kubernetes/helm/test-release/history', () =>
|
||||
HttpResponse.json(helmReleaseHistory)
|
||||
),
|
||||
http.get('/api/kubernetes/3/namespaces/default/events', () =>
|
||||
HttpResponse.json([])
|
||||
),
|
||||
http.get('/api/kubernetes/3/namespaces/default', () =>
|
||||
HttpResponse.json({
|
||||
Id: 'default',
|
||||
Name: 'default',
|
||||
Status: { phase: 'Active' },
|
||||
Annotations: {},
|
||||
CreationDate: '2021-01-01T00:00:00Z',
|
||||
NamespaceOwner: '',
|
||||
IsSystem: false,
|
||||
IsDefault: true,
|
||||
})
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
function setupMockHandlers(helmReleaseHandler: ReturnType<typeof http.get>) {
|
||||
server.use(helmReleaseHandler, ...createCommonHandlers());
|
||||
}
|
||||
|
||||
function renderComponent() {
|
||||
const user = new UserViewModel({ Username: 'user' });
|
||||
const Wrapped = withTestQueryProvider(
|
||||
|
|
@ -162,30 +203,9 @@ describe(
|
|||
it('should display helm release details for minimal release when data is loaded', async () => {
|
||||
vi.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
server.use(
|
||||
setupMockHandlers(
|
||||
http.get('/api/endpoints/3/kubernetes/helm/test-release', () =>
|
||||
HttpResponse.json(minimalHelmRelease)
|
||||
),
|
||||
http.get('/api/users/undefined/helm/repositories', () =>
|
||||
HttpResponse.json({
|
||||
GlobalRepository: 'https://charts.helm.sh/stable',
|
||||
UserRepositories: [
|
||||
{ Id: '1', URL: 'https://charts.helm.sh/stable' },
|
||||
],
|
||||
})
|
||||
),
|
||||
http.get('/api/templates/helm', () =>
|
||||
HttpResponse.json({
|
||||
entries: {
|
||||
'test-chart': [{ version: '1.0.0' }],
|
||||
},
|
||||
})
|
||||
),
|
||||
http.get('/api/endpoints/3/kubernetes/helm/test-release/history', () =>
|
||||
HttpResponse.json(helmReleaseHistory)
|
||||
),
|
||||
http.get('/api/kubernetes/3/namespaces/default/events', () =>
|
||||
HttpResponse.json([])
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -224,13 +244,9 @@ describe(
|
|||
|
||||
it('should display error message when API request fails', async () => {
|
||||
// Mock API failure
|
||||
server.use(
|
||||
setupMockHandlers(
|
||||
http.get('/api/endpoints/3/kubernetes/helm/test-release', () =>
|
||||
HttpResponse.error()
|
||||
),
|
||||
// Add mock for events endpoint
|
||||
http.get('/api/kubernetes/3/namespaces/default/events', () =>
|
||||
HttpResponse.json([])
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -253,15 +269,9 @@ describe(
|
|||
});
|
||||
|
||||
it('should display additional details when available in helm release', async () => {
|
||||
server.use(
|
||||
setupMockHandlers(
|
||||
http.get('/api/endpoints/3/kubernetes/helm/test-release', () =>
|
||||
HttpResponse.json(completeHelmRelease)
|
||||
),
|
||||
http.get('/api/endpoints/3/kubernetes/helm/test-release/history', () =>
|
||||
HttpResponse.json(helmReleaseHistory)
|
||||
),
|
||||
http.get('/api/kubernetes/3/namespaces/default/events', () =>
|
||||
HttpResponse.json([])
|
||||
)
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { Card } from '@@/Card';
|
|||
import { Alert } from '@@/Alert';
|
||||
|
||||
import { HelmRelease } from '../types';
|
||||
import { useIsSystemNamespace } from '../../namespaces/queries/useIsSystemNamespace';
|
||||
|
||||
import { HelmSummary } from './HelmSummary';
|
||||
import { ReleaseTabs } from './ReleaseDetails/ReleaseTabs';
|
||||
|
|
@ -37,6 +38,8 @@ export function HelmApplicationView() {
|
|||
revision: selectedRevision,
|
||||
});
|
||||
|
||||
const isSystemNamespace = useIsSystemNamespace(namespace);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
|
|
@ -63,28 +66,30 @@ export function HelmApplicationView() {
|
|||
/>
|
||||
</div>
|
||||
<Authorized authorizations="K8sApplicationsW">
|
||||
<ChartActions
|
||||
environmentId={environmentId}
|
||||
releaseName={String(name)}
|
||||
namespace={String(namespace)}
|
||||
latestRevision={latestRevision ?? 1}
|
||||
earlistRevision={earlistRevision}
|
||||
selectedRevision={selectedRevision}
|
||||
release={helmReleaseQuery.data}
|
||||
updateRelease={(updatedRelease: HelmRelease) => {
|
||||
queryClient.setQueryData(
|
||||
[
|
||||
environmentId,
|
||||
'helm',
|
||||
'releases',
|
||||
namespace,
|
||||
name,
|
||||
true,
|
||||
],
|
||||
updatedRelease
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{!isSystemNamespace && (
|
||||
<ChartActions
|
||||
environmentId={environmentId}
|
||||
releaseName={String(name)}
|
||||
namespace={String(namespace)}
|
||||
latestRevision={latestRevision ?? 1}
|
||||
earlistRevision={earlistRevision}
|
||||
selectedRevision={selectedRevision}
|
||||
release={helmReleaseQuery.data}
|
||||
updateRelease={(updatedRelease: HelmRelease) => {
|
||||
queryClient.setQueryData(
|
||||
[
|
||||
environmentId,
|
||||
'helm',
|
||||
'releases',
|
||||
namespace,
|
||||
name,
|
||||
true,
|
||||
],
|
||||
updatedRelease
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Authorized>
|
||||
</div>
|
||||
</WidgetTitle>
|
||||
|
|
|
|||
|
|
@ -98,6 +98,7 @@ function renderComponent({
|
|||
selectedChart={selectedChart}
|
||||
namespace={namespace}
|
||||
name={name}
|
||||
isRepoAvailable
|
||||
/>
|
||||
)),
|
||||
user
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@ import { Option } from '@@/form-components/PortainerSelect';
|
|||
|
||||
import { Chart } from '../types';
|
||||
import { useUpdateHelmReleaseMutation } from '../queries/useUpdateHelmReleaseMutation';
|
||||
import {
|
||||
ChartVersion,
|
||||
useHelmRepoVersions,
|
||||
} from '../queries/useHelmRepoVersions';
|
||||
|
||||
import { HelmInstallInnerForm } from './HelmInstallInnerForm';
|
||||
import { HelmInstallFormValues } from './types';
|
||||
|
|
@ -20,22 +24,39 @@ type Props = {
|
|||
selectedChart: Chart;
|
||||
namespace?: string;
|
||||
name?: string;
|
||||
isRepoAvailable: boolean;
|
||||
};
|
||||
|
||||
export function HelmInstallForm({ selectedChart, namespace, name }: Props) {
|
||||
export function HelmInstallForm({
|
||||
selectedChart,
|
||||
namespace,
|
||||
name,
|
||||
isRepoAvailable,
|
||||
}: Props) {
|
||||
const environmentId = useEnvironmentId();
|
||||
const router = useRouter();
|
||||
const analytics = useAnalytics();
|
||||
const versionOptions: Option<string>[] = selectedChart.versions.map(
|
||||
const helmRepoVersionsQuery = useHelmRepoVersions(
|
||||
selectedChart.name,
|
||||
60 * 60 * 1000, // 1 hour
|
||||
[
|
||||
{
|
||||
repo: selectedChart.repo,
|
||||
},
|
||||
]
|
||||
);
|
||||
const versions = helmRepoVersionsQuery.data;
|
||||
const versionOptions: Option<ChartVersion>[] = versions.map(
|
||||
(version, index) => ({
|
||||
label: index === 0 ? `${version} (latest)` : version,
|
||||
label: index === 0 ? `${version.Version} (latest)` : version.Version,
|
||||
value: version,
|
||||
})
|
||||
);
|
||||
const defaultVersion = versionOptions[0]?.value;
|
||||
const initialValues: HelmInstallFormValues = {
|
||||
values: '',
|
||||
version: defaultVersion ?? '',
|
||||
version: defaultVersion?.Version ?? '',
|
||||
repo: defaultVersion?.Repo ?? selectedChart.repo ?? '',
|
||||
};
|
||||
|
||||
const installHelmChartMutation = useUpdateHelmReleaseMutation(environmentId);
|
||||
|
|
@ -55,6 +76,8 @@ export function HelmInstallForm({ selectedChart, namespace, name }: Props) {
|
|||
namespace={namespace}
|
||||
name={name}
|
||||
versionOptions={versionOptions}
|
||||
isVersionsLoading={helmRepoVersionsQuery.isInitialLoading}
|
||||
isRepoAvailable={isRepoAvailable}
|
||||
/>
|
||||
</Formik>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
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 { LoadingButton } from '@@/buttons';
|
||||
|
||||
import { Chart } from '../types';
|
||||
import { useHelmChartValues } from '../queries/useHelmChartValues';
|
||||
import { HelmValuesInput } from '../components/HelmValuesInput';
|
||||
import { ChartVersion } from '../queries/useHelmRepoVersions';
|
||||
|
||||
import { HelmInstallFormValues } from './types';
|
||||
|
||||
|
|
@ -16,7 +17,9 @@ type Props = {
|
|||
selectedChart: Chart;
|
||||
namespace?: string;
|
||||
name?: string;
|
||||
versionOptions: Option<string>[];
|
||||
versionOptions: Option<ChartVersion>[];
|
||||
isVersionsLoading: boolean;
|
||||
isRepoAvailable: boolean;
|
||||
};
|
||||
|
||||
export function HelmInstallInnerForm({
|
||||
|
|
@ -24,21 +27,39 @@ export function HelmInstallInnerForm({
|
|||
namespace,
|
||||
name,
|
||||
versionOptions,
|
||||
isVersionsLoading,
|
||||
isRepoAvailable,
|
||||
}: Props) {
|
||||
const { values, setFieldValue, isSubmitting } =
|
||||
useFormikContext<HelmInstallFormValues>();
|
||||
|
||||
const chartValuesRefQuery = useHelmChartValues({
|
||||
chart: selectedChart.name,
|
||||
repo: selectedChart.repo,
|
||||
version: values?.version,
|
||||
});
|
||||
|
||||
const selectedVersion = useMemo(
|
||||
const selectedVersion: ChartVersion | undefined = useMemo(
|
||||
() =>
|
||||
versionOptions.find((v) => v.value === values.version)?.value ??
|
||||
versionOptions[0]?.value,
|
||||
[versionOptions, values.version]
|
||||
versionOptions.find(
|
||||
(v) =>
|
||||
v.value.Version === values.version &&
|
||||
v.value.Repo === selectedChart.repo
|
||||
)?.value ?? versionOptions[0]?.value,
|
||||
[versionOptions, values.version, selectedChart.repo]
|
||||
);
|
||||
|
||||
const repoParams = {
|
||||
repo: selectedChart.repo,
|
||||
};
|
||||
// use isLatestVersionFetched to cache the latest version, to avoid duplicate fetches
|
||||
const isLatestVersionFetched =
|
||||
// if no version is selected, the latest version gets fetched
|
||||
!versionOptions.length ||
|
||||
// otherwise check if the selected version is the latest version
|
||||
(selectedVersion?.Version === versionOptions[0]?.value.Version &&
|
||||
selectedVersion?.Repo === versionOptions[0]?.value.Repo);
|
||||
const chartValuesRefQuery = useHelmChartValues(
|
||||
{
|
||||
chart: selectedChart.name,
|
||||
version: values?.version,
|
||||
...repoParams,
|
||||
},
|
||||
isLatestVersionFetched
|
||||
);
|
||||
|
||||
return (
|
||||
|
|
@ -48,14 +69,18 @@ export function HelmInstallInnerForm({
|
|||
<FormControl
|
||||
label="Version"
|
||||
inputId="version-input"
|
||||
isLoading={isVersionsLoading}
|
||||
loadingText="Loading versions..."
|
||||
>
|
||||
<PortainerSelect<string>
|
||||
<PortainerSelect<ChartVersion>
|
||||
value={selectedVersion}
|
||||
options={versionOptions}
|
||||
noOptionsMessage={() => 'No versions found'}
|
||||
placeholder="Select a version"
|
||||
onChange={(version) => {
|
||||
if (version) {
|
||||
setFieldValue('version', version);
|
||||
setFieldValue('version', version.Version);
|
||||
setFieldValue('repo', version.Repo);
|
||||
}
|
||||
}}
|
||||
data-cy="helm-version-input"
|
||||
|
|
@ -70,13 +95,15 @@ export function HelmInstallInnerForm({
|
|||
</FormSection>
|
||||
</div>
|
||||
|
||||
<FormActions
|
||||
submitLabel="Install"
|
||||
<LoadingButton
|
||||
className="!ml-0"
|
||||
loadingText="Installing Helm chart"
|
||||
isLoading={isSubmitting}
|
||||
isValid={!!namespace && !!name}
|
||||
disabled={!namespace || !name || !isRepoAvailable}
|
||||
data-cy="helm-install"
|
||||
/>
|
||||
>
|
||||
Install
|
||||
</LoadingButton>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
import { useState } from 'react';
|
||||
import { compact } from 'lodash';
|
||||
|
||||
import { useCurrentUser } from '@/react/hooks/useUser';
|
||||
|
||||
import { Chart } from '../types';
|
||||
import { useHelmChartList } from '../queries/useHelmChartList';
|
||||
import { useHelmRegistries } from '../queries/useHelmRegistries';
|
||||
import { FormSection } from '@@/form-components/FormSection';
|
||||
|
||||
import { useHelmHTTPChartList } from '../queries/useHelmChartList';
|
||||
import { Chart } from '../types';
|
||||
import {
|
||||
HelmRegistrySelect,
|
||||
RepoValue,
|
||||
} from '../components/HelmRegistrySelect';
|
||||
import { useHelmRepoOptions } from '../queries/useHelmRepositories';
|
||||
|
||||
import { HelmTemplatesList } from './HelmTemplatesList';
|
||||
import { HelmTemplatesSelectedItem } from './HelmTemplatesSelectedItem';
|
||||
import { HelmInstallForm } from './HelmInstallForm';
|
||||
import { HelmTemplatesSelectedItem } from './HelmTemplatesSelectedItem';
|
||||
import { HelmTemplatesList } from './HelmTemplatesList';
|
||||
|
||||
interface Props {
|
||||
onSelectHelmChart: (chartName: string) => void;
|
||||
|
|
@ -19,11 +24,60 @@ interface Props {
|
|||
|
||||
export function HelmTemplates({ onSelectHelmChart, namespace, name }: Props) {
|
||||
const [selectedChart, setSelectedChart] = useState<Chart | null>(null);
|
||||
const [selectedRegistry, setSelectedRegistry] = useState<string | null>(null);
|
||||
|
||||
const [selectedRepo, setSelectedRepo] = useState<RepoValue | null>(null);
|
||||
const { user } = useCurrentUser();
|
||||
const helmReposQuery = useHelmRegistries();
|
||||
const chartListQuery = useHelmChartList(user.Id, compact([selectedRegistry]));
|
||||
const chartListQuery = useHelmHTTPChartList(
|
||||
user.Id,
|
||||
selectedRepo?.repoUrl ?? '',
|
||||
!!selectedRepo?.repoUrl
|
||||
);
|
||||
const repoOptionsQuery = useHelmRepoOptions();
|
||||
const isRepoAvailable =
|
||||
!!repoOptionsQuery.data && repoOptionsQuery.data.length > 0;
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-sm-12 p-0">
|
||||
<FormSection title="Helm chart">
|
||||
{selectedChart ? (
|
||||
<>
|
||||
<HelmTemplatesSelectedItem
|
||||
selectedChart={selectedChart}
|
||||
clearHelmChart={clearHelmChart}
|
||||
/>
|
||||
<HelmInstallForm
|
||||
selectedChart={selectedChart}
|
||||
namespace={namespace}
|
||||
name={name}
|
||||
isRepoAvailable={isRepoAvailable}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<HelmRegistrySelect
|
||||
selectedRegistry={selectedRepo}
|
||||
onRegistryChange={setSelectedRepo}
|
||||
namespace={namespace}
|
||||
isRepoAvailable={isRepoAvailable}
|
||||
isLoading={repoOptionsQuery.isLoading}
|
||||
isError={repoOptionsQuery.isError}
|
||||
repoOptions={repoOptionsQuery.data ?? []}
|
||||
/>
|
||||
{selectedRepo && (
|
||||
<HelmTemplatesList
|
||||
charts={chartListQuery.data ?? []}
|
||||
selectAction={handleChartSelection}
|
||||
isLoadingCharts={chartListQuery.isInitialLoading}
|
||||
selectedRegistry={selectedRepo}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</FormSection>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
function clearHelmChart() {
|
||||
setSelectedChart(null);
|
||||
onSelectHelmChart('');
|
||||
|
|
@ -33,33 +87,4 @@ export function HelmTemplates({ onSelectHelmChart, namespace, name }: Props) {
|
|||
setSelectedChart(chart);
|
||||
onSelectHelmChart(chart.name);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="col-sm-12 p-0">
|
||||
{selectedChart ? (
|
||||
<>
|
||||
<HelmTemplatesSelectedItem
|
||||
selectedChart={selectedChart}
|
||||
clearHelmChart={clearHelmChart}
|
||||
/>
|
||||
<HelmInstallForm
|
||||
selectedChart={selectedChart}
|
||||
namespace={namespace}
|
||||
name={name}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<HelmTemplatesList
|
||||
charts={chartListQuery.data}
|
||||
selectAction={handleChartSelection}
|
||||
isLoading={chartListQuery.isInitialLoading}
|
||||
registries={helmReposQuery.data ?? []}
|
||||
selectedRegistry={selectedRegistry}
|
||||
setSelectedRegistry={setSelectedRegistry}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,25 +46,63 @@ const mockCharts: Chart[] = [
|
|||
|
||||
const selectActionMock = vi.fn();
|
||||
|
||||
const mockUseEnvironmentId = vi.fn(() => 1);
|
||||
|
||||
vi.mock('@/react/hooks/useEnvironmentId', () => ({
|
||||
useEnvironmentId: () => mockUseEnvironmentId(),
|
||||
}));
|
||||
|
||||
// Mock the helm registries query
|
||||
vi.mock('../queries/useHelmRegistries', () => ({
|
||||
useHelmRegistries: vi.fn(() => ({
|
||||
data: ['https://example.com', 'https://example.com/2'],
|
||||
isInitialLoading: false,
|
||||
isError: false,
|
||||
})),
|
||||
}));
|
||||
|
||||
// Mock the environment registries query
|
||||
vi.mock(
|
||||
'@/react/portainer/environments/queries/useEnvironmentRegistries',
|
||||
() => ({
|
||||
useEnvironmentRegistries: vi.fn(() => ({
|
||||
data: [
|
||||
{ Id: 1, URL: 'https://registry.example.com' },
|
||||
{ Id: 2, URL: 'https://registry2.example.com' },
|
||||
],
|
||||
isInitialLoading: false,
|
||||
isError: false,
|
||||
})),
|
||||
})
|
||||
);
|
||||
|
||||
function renderComponent({
|
||||
loading = false,
|
||||
charts = mockCharts,
|
||||
selectAction = selectActionMock,
|
||||
selectedRegistry = '',
|
||||
selectedRegistry = {
|
||||
repoUrl: 'https://example.com',
|
||||
name: 'Test Registry',
|
||||
},
|
||||
}: {
|
||||
loading?: boolean;
|
||||
charts?: Chart[];
|
||||
selectAction?: (chart: Chart) => void;
|
||||
selectedRegistry?: {
|
||||
repoUrl?: string;
|
||||
name?: string;
|
||||
} | null;
|
||||
} = {}) {
|
||||
const user = new UserViewModel({ Username: 'user' });
|
||||
const registries = ['https://example.com', 'https://example.com/2'];
|
||||
|
||||
const Wrapped = withTestQueryProvider(
|
||||
withUserProvider(
|
||||
withTestRouter(() => (
|
||||
<HelmTemplatesList
|
||||
isLoading={loading}
|
||||
isLoadingCharts={loading}
|
||||
charts={charts}
|
||||
selectAction={selectAction}
|
||||
registries={registries}
|
||||
selectedRegistry={selectedRegistry}
|
||||
setSelectedRegistry={() => {}}
|
||||
/>
|
||||
)),
|
||||
user
|
||||
|
|
@ -81,8 +119,10 @@ describe('HelmTemplatesList', () => {
|
|||
it('should display title and charts list', async () => {
|
||||
renderComponent();
|
||||
|
||||
// Check for the title
|
||||
expect(screen.getByText('Helm chart')).toBeInTheDocument();
|
||||
// Check for the title with registry name
|
||||
expect(
|
||||
screen.getByText('Select a helm chart from Test Registry')
|
||||
).toBeInTheDocument();
|
||||
|
||||
// Check for charts
|
||||
expect(screen.getByText('test-chart-1')).toBeInTheDocument();
|
||||
|
|
@ -160,21 +200,27 @@ describe('HelmTemplatesList', () => {
|
|||
});
|
||||
|
||||
it('should show empty message when no charts are available and a registry is selected', async () => {
|
||||
renderComponent({ charts: [], selectedRegistry: 'https://example.com' });
|
||||
renderComponent({
|
||||
charts: [],
|
||||
selectedRegistry: {
|
||||
repoUrl: 'https://example.com',
|
||||
name: 'Test Registry',
|
||||
},
|
||||
});
|
||||
|
||||
// Check for empty message
|
||||
expect(
|
||||
screen.getByText('No helm charts available in this registry.')
|
||||
screen.getByText('No helm charts available in this repository.')
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should show 'select registry' message when no charts are available and no registry is selected", async () => {
|
||||
renderComponent({ charts: [] });
|
||||
renderComponent({ charts: [], selectedRegistry: null });
|
||||
|
||||
// Check for message
|
||||
expect(
|
||||
screen.getByText(
|
||||
'Please select a registry to view available Helm charts.'
|
||||
'Please select a repository to view available Helm charts.'
|
||||
)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,59 +1,47 @@
|
|||
import { useState, useMemo } from 'react';
|
||||
import { components, OptionProps } from 'react-select';
|
||||
|
||||
import {
|
||||
PortainerSelect,
|
||||
Option,
|
||||
} from '@/react/components/form-components/PortainerSelect';
|
||||
import { Link } from '@/react/components/Link';
|
||||
import { PortainerSelect } from '@/react/components/form-components/PortainerSelect';
|
||||
|
||||
import { InsightsBox } from '@@/InsightsBox';
|
||||
import { SearchBar } from '@@/datatables/SearchBar';
|
||||
import { InlineLoader } from '@@/InlineLoader';
|
||||
|
||||
import { Chart } from '../types';
|
||||
import { RepoValue } from '../components/HelmRegistrySelect';
|
||||
|
||||
import { HelmTemplatesListItem } from './HelmTemplatesListItem';
|
||||
|
||||
interface Props {
|
||||
isLoading: boolean;
|
||||
isLoadingCharts: boolean;
|
||||
charts?: Chart[];
|
||||
selectAction: (chart: Chart) => void;
|
||||
registries: string[];
|
||||
selectedRegistry: string | null;
|
||||
setSelectedRegistry: (registry: string | null) => void;
|
||||
selectedRegistry: RepoValue | null;
|
||||
}
|
||||
|
||||
export function HelmTemplatesList({
|
||||
isLoading,
|
||||
isLoadingCharts,
|
||||
charts = [],
|
||||
selectAction,
|
||||
registries,
|
||||
selectedRegistry,
|
||||
setSelectedRegistry,
|
||||
}: Props) {
|
||||
const [textFilter, setTextFilter] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
||||
|
||||
const categories = useMemo(() => getCategories(charts), [charts]);
|
||||
const registryOptions = useMemo(
|
||||
() =>
|
||||
registries.map((registry) => ({
|
||||
label: registry,
|
||||
value: registry,
|
||||
})),
|
||||
[registries]
|
||||
);
|
||||
|
||||
const filteredCharts = useMemo(
|
||||
() => getFilteredCharts(charts, textFilter, selectedCategory),
|
||||
[charts, textFilter, selectedCategory]
|
||||
);
|
||||
|
||||
const isSelectedRegistryEmpty =
|
||||
!isLoadingCharts && charts.length === 0 && selectedRegistry;
|
||||
|
||||
return (
|
||||
<section className="datatable" aria-label="Helm charts">
|
||||
<div className="toolBar vertical-center relative w-full flex-wrap !gap-x-5 !gap-y-1 !px-0 !overflow-visible">
|
||||
<div className="toolBarTitle vertical-center">Helm chart</div>
|
||||
<div className="toolBar vertical-center relative w-full !gap-x-5 !gap-y-1 !px-0 overflow-auto">
|
||||
<div className="toolBarTitle vertical-center whitespace-nowrap">
|
||||
Select a helm chart from {selectedRegistry?.name}
|
||||
</div>
|
||||
|
||||
<SearchBar
|
||||
value={textFilter}
|
||||
|
|
@ -63,20 +51,7 @@ export function HelmTemplatesList({
|
|||
className="!mr-0 h-9"
|
||||
/>
|
||||
|
||||
<div className="w-full sm:w-1/4">
|
||||
<PortainerSelect
|
||||
placeholder="Select a registry"
|
||||
value={selectedRegistry ?? ''}
|
||||
options={registryOptions}
|
||||
onChange={setSelectedRegistry}
|
||||
isClearable
|
||||
bindToBody
|
||||
components={{ Option: RegistryOption }}
|
||||
data-cy="helm-registry-select"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full sm:w-1/4">
|
||||
<div className="w-full sm:w-1/4 flex-none">
|
||||
<PortainerSelect
|
||||
placeholder="Select a category"
|
||||
value={selectedCategory}
|
||||
|
|
@ -88,42 +63,6 @@ export function HelmTemplatesList({
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-fit">
|
||||
<div className="small text-muted mb-2">
|
||||
Select the Helm chart to use. Bring further Helm charts into your
|
||||
selection list via{' '}
|
||||
<Link
|
||||
to="portainer.account"
|
||||
params={{ '#': 'helm-repositories' }}
|
||||
data-cy="helm-repositories-link"
|
||||
>
|
||||
User settings - Helm repositories
|
||||
</Link>
|
||||
.
|
||||
</div>
|
||||
|
||||
<InsightsBox
|
||||
header="Disclaimer"
|
||||
type="slim"
|
||||
content={
|
||||
<>
|
||||
At present Portainer does not support OCI format Helm charts.
|
||||
Support for OCI charts will be available in a future release.
|
||||
<br />
|
||||
If you would like to provide feedback on OCI support or get access
|
||||
to early releases to test this functionality,{' '}
|
||||
<a
|
||||
href="https://bit.ly/3WVkayl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
please get in touch
|
||||
</a>
|
||||
.
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="blocklist !px-0" role="list">
|
||||
{filteredCharts.map((chart) => (
|
||||
|
|
@ -138,7 +77,7 @@ export function HelmTemplatesList({
|
|||
<div className="text-muted small mt-4">No Helm charts found</div>
|
||||
)}
|
||||
|
||||
{isLoading && (
|
||||
{isLoadingCharts && (
|
||||
<div className="flex flex-col">
|
||||
<InlineLoader className="justify-center">
|
||||
Loading helm charts...
|
||||
|
|
@ -151,15 +90,15 @@ export function HelmTemplatesList({
|
|||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && charts.length === 0 && selectedRegistry && (
|
||||
{isSelectedRegistryEmpty && (
|
||||
<div className="text-muted text-center">
|
||||
No helm charts available in this registry.
|
||||
No helm charts available in this repository.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!selectedRegistry && (
|
||||
<div className="text-muted text-center">
|
||||
Please select a registry to view available Helm charts.
|
||||
Please select a repository to view available Helm charts.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -167,20 +106,6 @@ export function HelmTemplatesList({
|
|||
);
|
||||
}
|
||||
|
||||
// truncate the registry text, because some registry names are urls, which are too long
|
||||
function RegistryOption(props: OptionProps<Option<string>>) {
|
||||
const { data: registry } = props;
|
||||
|
||||
return (
|
||||
<div title={registry.value}>
|
||||
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
||||
<components.Option {...props} className="whitespace-nowrap truncate">
|
||||
{registry.value}
|
||||
</components.Option>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get categories from charts
|
||||
* @param charts - The charts to get the categories from
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export function HelmTemplatesSelectedItem({
|
|||
<FallbackImage
|
||||
src={selectedChart.icon}
|
||||
fallbackIcon={HelmIcon}
|
||||
className="h-16 w-16"
|
||||
className="h-16 w-16 flex-none"
|
||||
/>
|
||||
<div className="col-sm-12">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export type HelmInstallFormValues = {
|
||||
values: string;
|
||||
version: string;
|
||||
repo: string;
|
||||
};
|
||||
|
|
|
|||
242
app/react/kubernetes/helm/components/HelmRegistrySelect.test.tsx
Normal file
242
app/react/kubernetes/helm/components/HelmRegistrySelect.test.tsx
Normal file
|
|
@ -0,0 +1,242 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { vi } from 'vitest';
|
||||
|
||||
import selectEvent from '@/react/test-utils/react-select';
|
||||
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 { RegistryTypes } from '@/react/portainer/registries/types/registry';
|
||||
import { useCurrentUser } from '@/react/hooks/useUser';
|
||||
import { User, Role } from '@/portainer/users/types';
|
||||
|
||||
import { HelmRegistrySelect, RepoValue } from './HelmRegistrySelect';
|
||||
|
||||
// Mock the hooks with factory functions - preserve other exports
|
||||
vi.mock('@/react/hooks/useUser', async () => {
|
||||
const actual = await vi.importActual('@/react/hooks/useUser');
|
||||
return {
|
||||
...actual,
|
||||
useCurrentUser: vi.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
const mockOnRegistryChange = vi.fn();
|
||||
|
||||
const defaultProps = {
|
||||
selectedRegistry: null,
|
||||
onRegistryChange: mockOnRegistryChange,
|
||||
isRepoAvailable: true,
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
repoOptions: [],
|
||||
};
|
||||
|
||||
const mockRepoOptions = [
|
||||
{
|
||||
value: {
|
||||
repoUrl: 'https://charts.bitnami.com/bitnami',
|
||||
name: 'Bitnami',
|
||||
type: RegistryTypes.CUSTOM,
|
||||
},
|
||||
label: 'Bitnami',
|
||||
},
|
||||
{
|
||||
value: {
|
||||
repoUrl: 'https://kubernetes-charts.storage.googleapis.com',
|
||||
name: 'Stable',
|
||||
type: RegistryTypes.CUSTOM,
|
||||
},
|
||||
label: 'Stable',
|
||||
},
|
||||
];
|
||||
|
||||
interface MockUserHookReturn {
|
||||
user: User;
|
||||
isPureAdmin: boolean;
|
||||
}
|
||||
|
||||
interface UserProps {
|
||||
isPureAdmin?: boolean;
|
||||
}
|
||||
|
||||
// Get the mocked functions
|
||||
const mockUseCurrentUser = vi.mocked(useCurrentUser);
|
||||
|
||||
function renderComponent(props = {}, userProps: UserProps = {}) {
|
||||
const userResult: MockUserHookReturn = {
|
||||
user: {
|
||||
Id: 1,
|
||||
Username: 'admin',
|
||||
Role: Role.Admin,
|
||||
EndpointAuthorizations: {},
|
||||
UseCache: false,
|
||||
ThemeSettings: {
|
||||
color: 'auto',
|
||||
},
|
||||
},
|
||||
isPureAdmin: userProps.isPureAdmin || false,
|
||||
};
|
||||
|
||||
mockUseCurrentUser.mockReturnValue(userResult);
|
||||
|
||||
const Component = withTestQueryProvider(
|
||||
withUserProvider(
|
||||
withTestRouter(HelmRegistrySelect),
|
||||
new UserViewModel({ Username: 'admin', Role: 1 })
|
||||
)
|
||||
);
|
||||
|
||||
return render(<Component {...defaultProps} {...props} />);
|
||||
}
|
||||
|
||||
describe('HelmRegistrySelect', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
mockUseCurrentUser.mockClear();
|
||||
});
|
||||
|
||||
describe('Basic rendering', () => {
|
||||
it('should render with default placeholder', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByText('Select a repository')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with custom placeholder', () => {
|
||||
renderComponent({ placeholder: 'Custom placeholder' });
|
||||
expect(screen.getByText('Custom placeholder')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render loading state', () => {
|
||||
renderComponent({ isLoading: true });
|
||||
expect(screen.getByRole('combobox')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render error state', () => {
|
||||
renderComponent({ isError: true });
|
||||
expect(
|
||||
screen.getByText('Unable to load registry options.')
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Repository options', () => {
|
||||
it('should display repository options', async () => {
|
||||
const user = userEvent.setup();
|
||||
renderComponent({ repoOptions: mockRepoOptions });
|
||||
|
||||
const select = screen.getByRole('combobox');
|
||||
await user.click(select);
|
||||
|
||||
expect(screen.getByText('Bitnami')).toBeInTheDocument();
|
||||
expect(screen.getByText('Stable')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it.skip('should call onRegistryChange when option is selected', async () => {
|
||||
// Skipping this test due to react-select testing complexity
|
||||
// The onChange functionality is covered by integration tests
|
||||
renderComponent({ repoOptions: mockRepoOptions });
|
||||
|
||||
const select = screen.getByRole('combobox');
|
||||
await selectEvent.select(select, 'Bitnami');
|
||||
|
||||
expect(mockOnRegistryChange).toHaveBeenCalledWith({
|
||||
repoUrl: 'https://charts.bitnami.com/bitnami',
|
||||
name: 'Bitnami',
|
||||
type: RegistryTypes.CUSTOM,
|
||||
});
|
||||
});
|
||||
|
||||
it('should show selected repository value', () => {
|
||||
const selectedRegistry: RepoValue = {
|
||||
repoUrl: 'https://charts.bitnami.com/bitnami',
|
||||
name: 'Bitnami',
|
||||
type: RegistryTypes.CUSTOM,
|
||||
};
|
||||
|
||||
renderComponent({
|
||||
selectedRegistry,
|
||||
repoOptions: mockRepoOptions,
|
||||
});
|
||||
|
||||
// Since the component uses PortainerSelect which manages the display value,
|
||||
// we verify the props are correctly passed by checking the select element exists
|
||||
expect(screen.getByRole('combobox')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('No repositories warning', () => {
|
||||
it('should show no repositories warning when no repos are available', () => {
|
||||
renderComponent({
|
||||
isRepoAvailable: false,
|
||||
namespace: 'test-namespace',
|
||||
});
|
||||
|
||||
expect(
|
||||
screen.getByText(/There are no repositories available./)
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not show warning when loading', () => {
|
||||
renderComponent({
|
||||
isRepoAvailable: false,
|
||||
namespace: 'test-namespace',
|
||||
isLoading: true,
|
||||
});
|
||||
|
||||
expect(
|
||||
screen.queryByText('There are no repositories available.')
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should not show warning when no namespace is provided', () => {
|
||||
renderComponent({
|
||||
isRepoAvailable: false,
|
||||
});
|
||||
|
||||
expect(
|
||||
screen.queryByText('There are no repositories available.')
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Tooltip content', () => {
|
||||
it('should render the component with label and tooltip', () => {
|
||||
renderComponent({}, { isPureAdmin: true });
|
||||
|
||||
// Verify that the component renders the main label
|
||||
expect(screen.getByText('Helm chart source')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByRole('combobox')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Loading and error states', () => {
|
||||
it('should not show no repos warning when loading', () => {
|
||||
renderComponent({
|
||||
isLoading: true,
|
||||
isRepoAvailable: false,
|
||||
repoOptions: [],
|
||||
namespace: 'test-namespace',
|
||||
});
|
||||
|
||||
expect(
|
||||
screen.queryByText('There are no repositories available.')
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should show error when API fails', () => {
|
||||
renderComponent({
|
||||
isLoading: false,
|
||||
isError: true,
|
||||
isRepoAvailable: false,
|
||||
namespace: 'test-namespace',
|
||||
});
|
||||
|
||||
expect(
|
||||
screen.getByText('Unable to load registry options.')
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
156
app/react/kubernetes/helm/components/HelmRegistrySelect.tsx
Normal file
156
app/react/kubernetes/helm/components/HelmRegistrySelect.tsx
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
import { GroupBase } from 'react-select';
|
||||
|
||||
import {
|
||||
PortainerSelect,
|
||||
Option,
|
||||
} from '@/react/components/form-components/PortainerSelect';
|
||||
import { useCurrentUser } from '@/react/hooks/useUser';
|
||||
import { RegistryTypes } from '@/react/portainer/registries/types/registry';
|
||||
|
||||
import { FormControl } from '@@/form-components/FormControl';
|
||||
import { Alert } from '@@/Alert';
|
||||
import { Link } from '@@/Link';
|
||||
import { TextTip } from '@@/Tip/TextTip';
|
||||
|
||||
export type RepoValue = {
|
||||
repoUrl?: string; // set for traditional https helm repos
|
||||
name?: string;
|
||||
type?: RegistryTypes;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
selectedRegistry: RepoValue | null;
|
||||
onRegistryChange: (registry: RepoValue | null) => void;
|
||||
namespace?: string;
|
||||
placeholder?: string;
|
||||
'data-cy'?: string;
|
||||
isRepoAvailable: boolean;
|
||||
isLoading: boolean;
|
||||
isError: boolean;
|
||||
repoOptions: GroupBase<Option<RepoValue>>[];
|
||||
}
|
||||
|
||||
export function HelmRegistrySelect({
|
||||
selectedRegistry,
|
||||
onRegistryChange,
|
||||
namespace,
|
||||
placeholder = 'Select a repository',
|
||||
'data-cy': dataCy = 'helm-registry-select',
|
||||
isRepoAvailable,
|
||||
isLoading,
|
||||
isError,
|
||||
repoOptions,
|
||||
}: Props) {
|
||||
const { isPureAdmin } = useCurrentUser();
|
||||
|
||||
return (
|
||||
<FormControl
|
||||
label="Helm chart source"
|
||||
tooltip={<HelmChartSourceTooltip isPureAdmin={isPureAdmin} />}
|
||||
>
|
||||
<PortainerSelect<RepoValue>
|
||||
placeholder={placeholder}
|
||||
value={selectedRegistry ?? {}}
|
||||
options={repoOptions}
|
||||
isLoading={isLoading}
|
||||
onChange={onRegistryChange}
|
||||
isClearable
|
||||
bindToBody
|
||||
data-cy={dataCy}
|
||||
/>
|
||||
<NoReposWarning
|
||||
hasNoRepos={!isRepoAvailable}
|
||||
isLoading={isLoading}
|
||||
namespace={namespace}
|
||||
isPureAdmin={isPureAdmin}
|
||||
/>
|
||||
{isError && <Alert color="error">Unable to load registry options.</Alert>}
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
|
||||
function HelmChartSourceTooltip({ isPureAdmin }: { isPureAdmin: boolean }) {
|
||||
if (isPureAdmin) {
|
||||
return (
|
||||
<>
|
||||
<CreateUserRepoMessage />
|
||||
<br />
|
||||
<CreateGlobalRepoMessage />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Non-admin
|
||||
return <CreateUserRepoMessage />;
|
||||
}
|
||||
|
||||
function NoReposWarning({
|
||||
hasNoRepos,
|
||||
isLoading,
|
||||
namespace,
|
||||
isPureAdmin,
|
||||
}: {
|
||||
hasNoRepos: boolean;
|
||||
isLoading: boolean;
|
||||
namespace?: string;
|
||||
isPureAdmin: boolean;
|
||||
}) {
|
||||
if (!hasNoRepos || isLoading || !namespace) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<TextTip color="blue" className="mt-2">
|
||||
There are no repositories available.
|
||||
<CreateRepoMessage isPureAdmin={isPureAdmin} />
|
||||
</TextTip>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateRepoMessage({ isPureAdmin }: { isPureAdmin: boolean }) {
|
||||
if (isPureAdmin) {
|
||||
return (
|
||||
<>
|
||||
<CreateUserRepoMessage />
|
||||
<br />
|
||||
<CreateGlobalRepoMessage />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Non-admin
|
||||
return <CreateUserRepoMessage />;
|
||||
}
|
||||
|
||||
function CreateUserRepoMessage() {
|
||||
return (
|
||||
<>
|
||||
You can define <b>repositories</b> in the{' '}
|
||||
<Link
|
||||
to="portainer.account"
|
||||
params={{ '#': 'helm-repositories' }}
|
||||
data-cy="helm-repositories-link"
|
||||
>
|
||||
User settings - Helm repositories
|
||||
</Link>
|
||||
.
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateGlobalRepoMessage() {
|
||||
return (
|
||||
<>
|
||||
You can also define repositories in the{' '}
|
||||
<Link
|
||||
to="portainer.settings"
|
||||
params={{ '#': 'kubernetes-settings' }}
|
||||
data-cy="portainer-settings-link"
|
||||
target="_blank"
|
||||
>
|
||||
Portainer settings
|
||||
</Link>
|
||||
.
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import { useQueries } from '@tanstack/react-query';
|
||||
import { compact, flatMap } from 'lodash';
|
||||
import { useMemo } from 'react';
|
||||
import { compact } from 'lodash';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import axios from '@/portainer/services/axios';
|
||||
import { withGlobalError } from '@/react-tools/react-query';
|
||||
|
|
@ -8,45 +7,27 @@ import { withGlobalError } from '@/react-tools/react-query';
|
|||
import { Chart, HelmChartsResponse } from '../types';
|
||||
|
||||
/**
|
||||
* React hook to fetch helm charts from the provided repositories
|
||||
* Charts from each repository are loaded independently, allowing the UI
|
||||
* to show charts as they become available instead of waiting for all
|
||||
* repositories to load
|
||||
* React hook to fetch helm charts from the provided HTTP repository.
|
||||
* Charts are loaded from the specified repository URL.
|
||||
*
|
||||
* @param userId User ID
|
||||
* @param repositories List of repository URLs to fetch charts from
|
||||
* @param repository Repository URL to fetch charts from
|
||||
* @param enabled Flag indicating if the query should be enabled
|
||||
* @returns Query result containing helm charts
|
||||
*/
|
||||
export function useHelmChartList(userId: number, repositories: string[] = []) {
|
||||
// Fetch charts from each repository in parallel as separate queries
|
||||
const chartQueries = useQueries({
|
||||
queries: useMemo(
|
||||
() =>
|
||||
repositories.map((repo) => ({
|
||||
queryKey: [userId, repo, 'helm-charts'],
|
||||
queryFn: () => getChartsFromRepo(repo),
|
||||
enabled: !!userId && repositories.length > 0,
|
||||
// one request takes a long time, so fail early to get feedback to the user faster
|
||||
retries: false,
|
||||
...withGlobalError(`Unable to retrieve Helm charts from ${repo}`),
|
||||
})),
|
||||
[repositories, userId]
|
||||
),
|
||||
export function useHelmHTTPChartList(
|
||||
userId: number,
|
||||
repository: string,
|
||||
enabled: boolean
|
||||
) {
|
||||
return useQuery({
|
||||
queryKey: [userId, repository, 'helm-charts'],
|
||||
queryFn: () => getChartsFromRepo(repository),
|
||||
enabled: !!userId && !!repository && enabled,
|
||||
// one request takes a long time, so fail early to get feedback to the user faster
|
||||
retry: false,
|
||||
...withGlobalError(`Unable to retrieve Helm charts from ${repository}`),
|
||||
});
|
||||
|
||||
// Combine the results for easier consumption by components
|
||||
const allCharts = useMemo(
|
||||
() => flatMap(compact(chartQueries.map((q) => q.data))),
|
||||
[chartQueries]
|
||||
);
|
||||
|
||||
return {
|
||||
// Data from all repositories that have loaded so far
|
||||
data: allCharts,
|
||||
// Overall loading state
|
||||
isInitialLoading: chartQueries.some((q) => q.isInitialLoading),
|
||||
// Overall error state
|
||||
isError: chartQueries.some((q) => q.isError),
|
||||
};
|
||||
}
|
||||
|
||||
async function getChartsFromRepo(repo: string): Promise<Chart[]> {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,11 @@ import axios, { parseAxiosError } from '@/portainer/services/axios';
|
|||
import { withGlobalError } from '@/react-tools/react-query';
|
||||
|
||||
type Params = {
|
||||
/** The name of the chart to get the values for */
|
||||
chart: string;
|
||||
/** The repository URL or registry ID */
|
||||
repo: string;
|
||||
/** The version of the chart to get the values for */
|
||||
version?: string;
|
||||
};
|
||||
|
||||
|
|
@ -16,18 +19,26 @@ async function getHelmChartValues(params: Params) {
|
|||
});
|
||||
return response.data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err as Error, 'Unable to get Helm chart values');
|
||||
throw parseAxiosError(err, 'Unable to get Helm chart values');
|
||||
}
|
||||
}
|
||||
|
||||
export function useHelmChartValues(params: Params) {
|
||||
export function useHelmChartValues(params: Params, isLatestVersion = false) {
|
||||
const hasValidRepoUrl = !!params.repo;
|
||||
return useQuery({
|
||||
queryKey: ['helm-chart-values', params.repo, params.chart, params.version],
|
||||
queryKey: [
|
||||
'helm-chart-values',
|
||||
params.repo,
|
||||
params.chart,
|
||||
// if the latest version is fetched, use the latest version key to cache the latest version
|
||||
isLatestVersion ? 'latest' : params.version,
|
||||
],
|
||||
queryFn: () => getHelmChartValues(params),
|
||||
enabled: !!params.chart && !!params.repo,
|
||||
enabled: !!params.chart && hasValidRepoUrl,
|
||||
select: (data) => ({
|
||||
values: data,
|
||||
}),
|
||||
retry: 1,
|
||||
staleTime: 60 * 1000 * 20, // 60 minutes, because values are not expected to change often
|
||||
...withGlobalError('Unable to get Helm chart values'),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
import { useQuery } from '@tanstack/react-query';
|
||||
import { compact } from 'lodash';
|
||||
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { UserId } from '@/portainer/users/types';
|
||||
import { withGlobalError } from '@/react-tools/react-query';
|
||||
import { useCurrentUser } from '@/react/hooks/useUser';
|
||||
|
||||
import { HelmRegistriesResponse } from '../types';
|
||||
|
||||
/**
|
||||
* Hook to fetch all Helm registries for the current user
|
||||
*/
|
||||
export function useHelmRegistries() {
|
||||
const { user } = useCurrentUser();
|
||||
return useQuery(
|
||||
['helm', 'registries'],
|
||||
async () => getHelmRegistries(user.Id),
|
||||
{
|
||||
enabled: !!user.Id,
|
||||
...withGlobalError('Unable to retrieve helm registries'),
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Helm registries for user
|
||||
*/
|
||||
async function getHelmRegistries(userId: UserId) {
|
||||
try {
|
||||
const { data } = await axios.get<HelmRegistriesResponse>(
|
||||
`users/${userId}/helm/repositories`
|
||||
);
|
||||
const repos = compact([
|
||||
// compact will remove the global repository if it's empty
|
||||
data.GlobalRepository.toLowerCase(),
|
||||
...data.UserRepositories.map((repo) => repo.URL.toLowerCase()),
|
||||
]);
|
||||
return [...new Set(repos)];
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err, 'Unable to retrieve helm repositories for user');
|
||||
}
|
||||
}
|
||||
|
|
@ -21,6 +21,10 @@ export interface ChartVersion {
|
|||
AppVersion?: string;
|
||||
}
|
||||
|
||||
type RepoSource = {
|
||||
repo?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* React hook to get a list of available versions for a chart from specified repositories
|
||||
*
|
||||
|
|
@ -32,21 +36,21 @@ export interface ChartVersion {
|
|||
export function useHelmRepoVersions(
|
||||
chart: string,
|
||||
staleTime: number,
|
||||
repositories: string[] = [],
|
||||
repoSources: RepoSource[] = [],
|
||||
useCache: boolean = true
|
||||
) {
|
||||
// Fetch versions from each repository in parallel as separate queries
|
||||
const versionQueries = useQueries({
|
||||
queries: useMemo(
|
||||
() =>
|
||||
repositories.map((repo) => ({
|
||||
repoSources.map(({ repo }) => ({
|
||||
queryKey: ['helm', 'repositories', chart, repo, useCache],
|
||||
queryFn: () => getSearchHelmRepo(repo, chart, useCache),
|
||||
enabled: !!chart && repositories.length > 0,
|
||||
queryFn: () => getSearchHelmRepo({ repo, chart, useCache }),
|
||||
enabled: !!chart && repoSources.length > 0,
|
||||
staleTime,
|
||||
...withGlobalError(`Unable to retrieve versions from ${repo}`),
|
||||
})),
|
||||
[repositories, chart, staleTime, useCache]
|
||||
[repoSources, chart, staleTime, useCache]
|
||||
),
|
||||
});
|
||||
|
||||
|
|
@ -58,30 +62,35 @@ export function useHelmRepoVersions(
|
|||
|
||||
return {
|
||||
data: allVersions,
|
||||
isInitialLoading: versionQueries.some((q) => q.isLoading),
|
||||
isInitialLoading: versionQueries.some((q) => q.isInitialLoading),
|
||||
isError: versionQueries.some((q) => q.isError),
|
||||
isFetching: versionQueries.some((q) => q.isFetching),
|
||||
refetch: () => Promise.all(versionQueries.map((q) => q.refetch())),
|
||||
};
|
||||
}
|
||||
|
||||
type SearchRepoParams = {
|
||||
repo?: string;
|
||||
chart: string;
|
||||
useCache?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Get Helm repositories for user
|
||||
*/
|
||||
async function getSearchHelmRepo(
|
||||
repo: string,
|
||||
chart: string,
|
||||
useCache: boolean = true
|
||||
params: SearchRepoParams
|
||||
): Promise<ChartVersion[]> {
|
||||
try {
|
||||
const { data } = await axios.get<HelmSearch>(`templates/helm`, {
|
||||
params: { repo, chart, useCache },
|
||||
params,
|
||||
});
|
||||
const versions = data.entries[chart];
|
||||
// if separated by '/', take the last part
|
||||
const chartKey = params.chart.split('/').pop() || params.chart;
|
||||
const versions = data.entries[chartKey];
|
||||
return (
|
||||
versions?.map((v) => ({
|
||||
Chart: chart,
|
||||
Repo: repo,
|
||||
Repo: params.repo ?? '',
|
||||
Version: v.version,
|
||||
AppVersion: v.appVersion,
|
||||
})) ?? []
|
||||
|
|
|
|||
84
app/react/kubernetes/helm/queries/useHelmRepositories.ts
Normal file
84
app/react/kubernetes/helm/queries/useHelmRepositories.ts
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import { useQuery } from '@tanstack/react-query';
|
||||
import { compact } from 'lodash';
|
||||
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
import { UserId } from '@/portainer/users/types';
|
||||
import { withGlobalError } from '@/react-tools/react-query';
|
||||
import { useCurrentUser } from '@/react/hooks/useUser';
|
||||
import { Option } from '@/react/components/form-components/PortainerSelect';
|
||||
|
||||
import { HelmRegistriesResponse } from '../types';
|
||||
import { RepoValue } from '../components/HelmRegistrySelect';
|
||||
|
||||
/**
|
||||
* Hook to fetch all Helm registries for the current user
|
||||
*/
|
||||
export function useUserHelmRepositories<T = string[]>({
|
||||
select,
|
||||
}: {
|
||||
select?: (registries: string[]) => T;
|
||||
} = {}) {
|
||||
const { user } = useCurrentUser();
|
||||
return useQuery(
|
||||
['helm', 'registries'],
|
||||
async () => getUserHelmRepositories(user.Id),
|
||||
{
|
||||
enabled: !!user.Id,
|
||||
select,
|
||||
...withGlobalError('Unable to retrieve helm registries'),
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function useHelmRepoOptions() {
|
||||
return useUserHelmRepositories({
|
||||
select: (registries) => {
|
||||
const repoOptions = registries
|
||||
.map<Option<RepoValue>>((registry) => ({
|
||||
label: registry,
|
||||
value: {
|
||||
repoUrl: registry,
|
||||
isOCI: false,
|
||||
name: registry,
|
||||
},
|
||||
}))
|
||||
.sort((a, b) => a.label.localeCompare(b.label));
|
||||
return [
|
||||
{
|
||||
label: 'Helm Repositories',
|
||||
options: repoOptions,
|
||||
},
|
||||
{
|
||||
label: 'OCI Registries',
|
||||
options: [
|
||||
{
|
||||
label:
|
||||
'Installing from an OCI registry is a Portainer Business Feature',
|
||||
value: {},
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get Helm repositories for user
|
||||
*/
|
||||
async function getUserHelmRepositories(userId: UserId) {
|
||||
try {
|
||||
const { data } = await axios.get<HelmRegistriesResponse>(
|
||||
`users/${userId}/helm/repositories`
|
||||
);
|
||||
// compact will remove the global repository if it's empty
|
||||
const repos = compact([
|
||||
data.GlobalRepository.toLowerCase(),
|
||||
...data.UserRepositories.map((repo) => repo.URL.toLowerCase()),
|
||||
]);
|
||||
return [...new Set(repos)];
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err, 'Unable to retrieve helm repositories for user');
|
||||
}
|
||||
}
|
||||
|
|
@ -91,7 +91,7 @@ export interface HelmChartResponse {
|
|||
versions: string[];
|
||||
}
|
||||
|
||||
export interface HelmRepositoryResponse {
|
||||
export interface HelmRegistryResponse {
|
||||
Id: number;
|
||||
UserId: number;
|
||||
URL: string;
|
||||
|
|
@ -99,7 +99,7 @@ export interface HelmRepositoryResponse {
|
|||
|
||||
export interface HelmRegistriesResponse {
|
||||
GlobalRepository: string;
|
||||
UserRepositories: HelmRepositoryResponse[];
|
||||
UserRepositories: HelmRegistryResponse[];
|
||||
}
|
||||
|
||||
export interface HelmChartsResponse {
|
||||
|
|
@ -108,15 +108,6 @@ export interface HelmChartsResponse {
|
|||
generated: string;
|
||||
}
|
||||
|
||||
export interface InstallChartPayload {
|
||||
Name: string;
|
||||
Repo: string;
|
||||
Chart: string;
|
||||
Values: string;
|
||||
Namespace: string;
|
||||
Version?: string;
|
||||
}
|
||||
|
||||
export interface UpdateHelmReleasePayload {
|
||||
namespace: string;
|
||||
values?: string;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue