-
{item.KubernetesApplications ? (
>
@@ -31,8 +36,8 @@ export function EventsDatatable({
columns={columns}
settingsManager={tableState}
isLoading={isLoading}
- title="Events"
- titleIcon={History}
+ title={title}
+ titleIcon={titleIcon}
getRowId={(row) => row.metadata?.uid || ''}
disableSelect
renderTableSettings={() => (
diff --git a/app/react/kubernetes/components/EventsDatatable/columns/eventType.tsx b/app/react/kubernetes/components/EventsDatatable/columns/eventType.tsx
index 47b15a544..0d381d682 100644
--- a/app/react/kubernetes/components/EventsDatatable/columns/eventType.tsx
+++ b/app/react/kubernetes/components/EventsDatatable/columns/eventType.tsx
@@ -1,4 +1,8 @@
+import { Row } from '@tanstack/react-table';
+import { Event } from 'kubernetes-types/core/v1';
+
import { Badge, BadgeType } from '@@/Badge';
+import { filterHOC } from '@@/datatables/Filter';
import { columnHelper } from './helper';
@@ -7,6 +11,14 @@ export const eventType = columnHelper.accessor('type', {
cell: ({ getValue }) => (
{getValue()}
),
+
+ meta: {
+ filter: filterHOC('Filter by event type'),
+ },
+ enableColumnFilter: true,
+ filterFn: (row: Row, _: string, filterValue: string[]) =>
+ filterValue.length === 0 ||
+ (!!row.original.type && filterValue.includes(row.original.type)),
});
function getBadgeColor(status?: string): BadgeType {
diff --git a/app/react/kubernetes/components/EventsDatatable/columns/index.ts b/app/react/kubernetes/components/EventsDatatable/columns/index.ts
index 05ae483d5..f49658090 100644
--- a/app/react/kubernetes/components/EventsDatatable/columns/index.ts
+++ b/app/react/kubernetes/components/EventsDatatable/columns/index.ts
@@ -2,5 +2,6 @@ import { date } from './date';
import { kind } from './kind';
import { eventType } from './eventType';
import { message } from './message';
+import { name } from './name';
-export const columns = [date, kind, eventType, message];
+export const columns = [date, name, kind, eventType, message];
diff --git a/app/react/kubernetes/components/EventsDatatable/columns/kind.tsx b/app/react/kubernetes/components/EventsDatatable/columns/kind.tsx
index 856d6bf8b..641662291 100644
--- a/app/react/kubernetes/components/EventsDatatable/columns/kind.tsx
+++ b/app/react/kubernetes/components/EventsDatatable/columns/kind.tsx
@@ -1,8 +1,21 @@
+import { Row } from '@tanstack/react-table';
+import { Event } from 'kubernetes-types/core/v1';
+
+import { filterHOC } from '@@/datatables/Filter';
+
import { columnHelper } from './helper';
export const kind = columnHelper.accessor(
(event) => event.involvedObject.kind,
{
header: 'Kind',
+ meta: {
+ filter: filterHOC('Filter by kind'),
+ },
+ enableColumnFilter: true,
+ filterFn: (row: Row, _: string, filterValue: string[]) =>
+ filterValue.length === 0 ||
+ (!!row.original.involvedObject.kind &&
+ filterValue.includes(row.original.involvedObject.kind)),
}
);
diff --git a/app/react/kubernetes/components/EventsDatatable/columns/name.tsx b/app/react/kubernetes/components/EventsDatatable/columns/name.tsx
new file mode 100644
index 000000000..26bc0c8db
--- /dev/null
+++ b/app/react/kubernetes/components/EventsDatatable/columns/name.tsx
@@ -0,0 +1,16 @@
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor(
+ (event) => event.involvedObject.name ?? '-',
+ {
+ header: 'Name',
+ cell: ({ getValue }) => {
+ const name = getValue();
+ return (
+
+ {name}
+
+ );
+ },
+ }
+);
diff --git a/app/react/kubernetes/components/YAMLInspector.tsx b/app/react/kubernetes/components/YAMLInspector.tsx
index 5baadf3a7..9e678e9f5 100644
--- a/app/react/kubernetes/components/YAMLInspector.tsx
+++ b/app/react/kubernetes/components/YAMLInspector.tsx
@@ -29,7 +29,7 @@ export function YAMLInspector({
void;
+};
export function ChartActions({
environmentId,
releaseName,
namespace,
- currentRevision,
-}: {
- environmentId: EnvironmentId;
- releaseName: string;
- namespace?: string;
- currentRevision?: number;
-}) {
- const hasPreviousRevision = currentRevision && currentRevision >= 2;
+ latestRevision,
+ earlistRevision,
+ selectedRevision,
+ release,
+ updateRelease,
+}: Props) {
+ const showRollbackButton =
+ latestRevision && earlistRevision && latestRevision > earlistRevision;
return (
-
+
+
- {hasPreviousRevision && (
+ {showRollbackButton && (
({
function renderButton(props = {}) {
const defaultProps = {
latestRevision: 3, // So we're rolling back to revision 2
+ selectedRevision: 3, // This simulates the selectedRevision from URL params
environmentId: 1,
releaseName: 'test-release',
namespace: 'default',
...props,
};
- const Wrapped = withTestQueryProvider(RollbackButton);
+ const Wrapped = withTestQueryProvider(
+ withTestRouter(RollbackButton, {
+ route: '/?revision=3',
+ })
+ );
return render(
+
openUpgradeForm(versions, release)}
+ disabled={
+ versions.length === 0 ||
+ isInitialLoading ||
+ isError ||
+ release?.info?.status?.startsWith('pending')
+ }
+ loadingText="Upgrading..."
+ isLoading={updateHelmReleaseMutation.isLoading}
+ icon={ArrowUp}
+ size="medium"
+ >
+ Upgrade
+
+ {versions.length === 0 && isInitialLoading && (
+
+ Checking for new versions...
+
+ )}
+ {versions.length === 0 && !isInitialLoading && !isError && (
+
+ No versions available
+
+ Portainer is unable to find any versions for this chart in the
+ repositories saved. Try adding a new repository which contains
+ the chart in the{' '}
+
+ New version available ({latestVersionAvailable})
+
+ )}
+
+ );
+
+ async function openUpgradeForm(
+ versions: ChartVersion[],
+ release?: HelmRelease
+ ) {
+ const result = await openUpgradeHelmModal(editableHelmRelease, versions);
+
+ if (result) {
+ handleUpgrade(result, release);
+ }
+ }
+
+ function handleUpgrade(
+ 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,
+ });
+ },
+ });
+ }
+}
diff --git a/app/react/kubernetes/helm/HelmApplicationView/ChartActions/UpgradeHelmModal.tsx b/app/react/kubernetes/helm/HelmApplicationView/ChartActions/UpgradeHelmModal.tsx
new file mode 100644
index 000000000..bb71f28c5
--- /dev/null
+++ b/app/react/kubernetes/helm/HelmApplicationView/ChartActions/UpgradeHelmModal.tsx
@@ -0,0 +1,151 @@
+import { useState } from 'react';
+import { ArrowUp } from 'lucide-react';
+
+import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+
+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 { UpdateHelmReleasePayload } from '../queries/useUpdateHelmReleaseMutation';
+import { ChartVersion } from '../queries/useHelmRepositories';
+
+interface Props {
+ onSubmit: OnSubmit
;
+ values: UpdateHelmReleasePayload;
+ versions: ChartVersion[];
+}
+
+export function UpgradeHelmModal({ values, versions, onSubmit }: Props) {
+ const versionOptions: Option[] = versions.map((version) => {
+ const isCurrentVersion = version.Version === values.version;
+ const label = `${version.Repo}@${version.Version}${
+ isCurrentVersion ? ' (current)' : ''
+ }`;
+ return {
+ label,
+ value: version,
+ };
+ });
+ const defaultVersion =
+ versionOptions.find((v) => v.value.Version === values.version)?.value ||
+ versionOptions[0]?.value;
+ const [version, setVersion] = useState(defaultVersion);
+ const [userValues, setUserValues] = useState(values.values || '');
+
+ return (
+ onSubmit()}
+ size="lg"
+ className="flex flex-col h-[80vh] px-0"
+ aria-label="upgrade-helm"
+ >
+
+
+ onSubmit()}
+ color="secondary"
+ key="cancel-button"
+ size="medium"
+ data-cy="cancel-button-cy"
+ >
+ Cancel
+
+
+ onSubmit({
+ name: values.name,
+ values: userValues,
+ namespace: values.namespace,
+ chart: values.chart,
+ repo: version.Repo,
+ version: version.Version,
+ })
+ }
+ color="primary"
+ key="update-button"
+ size="medium"
+ data-cy="update-button-cy"
+ >
+ Upgrade
+
+
+
+
+ );
+}
+
+export async function openUpgradeHelmModal(
+ values: UpdateHelmReleasePayload,
+ versions: ChartVersion[]
+) {
+ return openModal(withReactQuery(withCurrentUser(UpgradeHelmModal)), {
+ values,
+ versions,
+ });
+}
diff --git a/app/react/kubernetes/helm/HelmApplicationView/HelmApplicationView.test.tsx b/app/react/kubernetes/helm/HelmApplicationView/HelmApplicationView.test.tsx
index c0e6b8d71..89f522d3a 100644
--- a/app/react/kubernetes/helm/HelmApplicationView/HelmApplicationView.test.tsx
+++ b/app/react/kubernetes/helm/HelmApplicationView/HelmApplicationView.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
import { HttpResponse } from 'msw';
import { withTestQueryProvider } from '@/react/test-utils/withTestQuery';
@@ -7,12 +7,14 @@ import { withTestRouter } from '@/react/test-utils/withRouter';
import { UserViewModel } from '@/portainer/models/user';
import { withUserProvider } from '@/react/test-utils/withUserProvider';
import { mockCodeMirror } from '@/setup-tests/mock-codemirror';
+import { mockLocalizeDate } from '@/setup-tests/mock-localizeDate';
import { HelmApplicationView } from './HelmApplicationView';
// Mock the necessary hooks and dependencies
const mockUseCurrentStateAndParams = vi.fn();
const mockUseEnvironmentId = vi.fn();
+mockLocalizeDate();
vi.mock('@uirouter/react', async (importOriginal: () => Promise) => ({
...(await importOriginal()),
@@ -32,32 +34,109 @@ const minimalHelmRelease = {
chart: {
metadata: {
name: 'test-chart',
- // appVersion: '1.0.0', // can be missing for a minimal release
version: '2.2.2',
},
},
info: {
status: 'deployed',
+ last_deployed: '2021-01-01T00:00:00Z',
// notes: 'This is a test note', // can be missing for a minimal release
},
manifest: 'This is a test manifest',
};
-const helmReleaseWithAdditionalDetails = {
- ...minimalHelmRelease,
- info: {
- ...minimalHelmRelease.info,
- notes: 'This is a test note',
- },
+// Create a more complete helm release object for testing
+const completeHelmRelease = {
+ name: 'test-release',
+ version: '1',
+ namespace: 'default',
chart: {
- ...minimalHelmRelease.chart,
metadata: {
- ...minimalHelmRelease.chart.metadata,
+ name: 'test-chart',
appVersion: '1.0.0',
+ version: '2.2.2',
},
},
+ info: {
+ status: 'deployed',
+ notes: 'This is a test note',
+ resources: [
+ {
+ kind: 'Deployment',
+ name: 'test-deployment',
+ namespace: 'default',
+ uid: 'test-deployment-uid',
+ status: {
+ healthSummary: {
+ status: 'Healthy',
+ reason: 'Running',
+ message: 'All replicas are ready',
+ },
+ },
+ metadata: {
+ name: 'test-deployment',
+ namespace: 'default',
+ },
+ },
+ {
+ kind: 'Service',
+ name: 'test-service',
+ namespace: 'default',
+ uid: 'test-service-uid',
+ status: {
+ healthSummary: {
+ status: 'Healthy',
+ reason: 'Available',
+ message: 'Service is available',
+ },
+ },
+ metadata: {
+ name: 'test-service',
+ namespace: 'default',
+ },
+ },
+ ],
+ },
+ manifest: 'This is a test manifest',
+ values: {
+ // Add some values to ensure the Values tab is present
+ replicaCount: 1,
+ image: {
+ repository: 'nginx',
+ tag: 'latest',
+ },
+ },
+ resources: [
+ {
+ kind: 'Deployment',
+ name: 'test-deployment',
+ namespace: 'default',
+ status: {
+ healthSummary: {
+ status: 'Healthy',
+ reason: 'Running',
+ message: 'All replicas are ready',
+ },
+ },
+ metadata: {
+ name: 'test-deployment',
+ namespace: 'default',
+ },
+ },
+ ],
};
+const helmReleaseHistory = [
+ {
+ version: 1,
+ updated: '2023-06-01T12:00:00Z',
+ status: 'deployed',
+ chart: 'test-chart-1.0.0',
+ app_version: '1.0.0',
+ description: 'Install complete',
+ },
+];
+
function renderComponent() {
const user = new UserViewModel({ Username: 'user' });
const Wrapped = withTestQueryProvider(
@@ -66,92 +145,171 @@ function renderComponent() {
return render(
-
- {name && (
-
-
-
+
+
+ {name && (
+
+
+
+
+
+ {
+ queryClient.setQueryData(
+ [
+ environmentId,
+ 'helm',
+ 'releases',
+ namespace,
+ name,
+ true,
+ ],
+ updatedRelease
+ );
+ }}
+ />
+
+
+ )}
+
+
-
+
+
+
+
+
@@ -68,10 +115,16 @@ export function HelmApplicationView() {
type HelmDetailsProps = {
isLoading: boolean;
isError: boolean;
- release: HelmRelease | undefined;
+ selectedRevision?: number;
+ release?: HelmRelease;
};
-function HelmDetails({ isLoading, isError, release: data }: HelmDetailsProps) {
+function HelmDetails({
+ isLoading,
+ isError,
+ release,
+ selectedRevision,
+}: HelmDetailsProps) {
if (isLoading) {
return
-
);
diff --git a/app/react/kubernetes/helm/HelmApplicationView/HelmRevisionItem.test.tsx b/app/react/kubernetes/helm/HelmApplicationView/HelmRevisionItem.test.tsx
new file mode 100644
index 000000000..638197ae0
--- /dev/null
+++ b/app/react/kubernetes/helm/HelmApplicationView/HelmRevisionItem.test.tsx
@@ -0,0 +1,116 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { withTestRouter } from '@/react/test-utils/withRouter';
+import { mockLocalizeDate } from '@/setup-tests/mock-localizeDate';
+
+import { HelmRelease } from '../types';
+
+import { HelmRevisionItem } from './HelmRevisionItem';
+
+const mockHelmRelease: HelmRelease = {
+ name: 'my-release',
+ version: 1,
+ info: {
+ status: 'deployed',
+ last_deployed: '2024-01-01T00:00:00Z',
+ },
+ chart: {
+ metadata: {
+ name: 'my-app',
+ version: '1.0.0',
+ },
+ },
+ manifest: 'apiVersion: v1\nkind: Service\nmetadata:\n name: my-service',
+};
+
+mockLocalizeDate();
+
+vi.mock('@uirouter/react', () => ({
+ useCurrentStateAndParams: () => ({
+ params: {
+ namespace: 'default',
+ name: 'my-release',
+ },
+ }),
+}));
+
+const mockUseCurrentStateAndParams = vi.fn();
+
+vi.mock('@uirouter/react', async (importOriginal: () => Promise) => ({
+ ...(await importOriginal()),
+ useCurrentStateAndParams: () => mockUseCurrentStateAndParams(),
+}));
+
+function getTestComponent() {
+ return withTestRouter(HelmRevisionItem);
+}
+
+describe('HelmRevisionItem', () => {
+ it('should display correct revision details', () => {
+ const TestComponent = getTestComponent();
+ render(
+
+
+
+
+ {getStatusText(item.info?.status)}
+
+ Revision #{item.version}
+
+
+
+ {item.chart.metadata?.name}-{item.chart.metadata?.version}
+
+ {item.info?.last_deployed && (
+
+ {localizeDate(new Date(item.info.last_deployed))}
+
+ )}
+
+
+ );
+}
diff --git a/app/react/kubernetes/helm/HelmApplicationView/HelmRevisionList.tsx b/app/react/kubernetes/helm/HelmApplicationView/HelmRevisionList.tsx
new file mode 100644
index 000000000..07ed2a8b2
--- /dev/null
+++ b/app/react/kubernetes/helm/HelmApplicationView/HelmRevisionList.tsx
@@ -0,0 +1,43 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+import { History } from 'lucide-react';
+
+import { WidgetIcon } from '@@/Widget/WidgetIcon';
+
+import { HelmRelease } from '../types';
+
+import { HelmRevisionItem } from './HelmRevisionItem';
+
+export function HelmRevisionList({
+ currentRevision,
+ history,
+}: {
+ currentRevision?: number;
+ history: HelmRelease[] | undefined;
+}) {
+ const { params } = useCurrentStateAndParams();
+ const { name, namespace } = params;
+
+ if (!history) {
+ return null;
+ }
+
+ return (
+
+
+
+ Revisions
+
+ {history?.map((historyItem) => (
+
+
+
+
+
+
+
+ View the history of this Helm application.
+
+
+
+
+ );
+}
diff --git a/app/react/kubernetes/helm/HelmApplicationView/HelmSummary.tsx b/app/react/kubernetes/helm/HelmApplicationView/HelmSummary.tsx
index 29f9e07d8..a7e32b247 100644
--- a/app/react/kubernetes/helm/HelmApplicationView/HelmSummary.tsx
+++ b/app/react/kubernetes/helm/HelmApplicationView/HelmSummary.tsx
@@ -1,24 +1,19 @@
import { Badge } from '@/react/components/Badge';
+import { localizeDate } from '@/react/common/date-utils';
import { Alert } from '@@/Alert';
import { HelmRelease } from '../types';
+import {
+ DeploymentStatus,
+ getStatusColor,
+ getStatusText,
+} from '../helm-status-utils';
interface Props {
release: HelmRelease;
}
-export enum DeploymentStatus {
- DEPLOYED = 'deployed',
- FAILED = 'failed',
- PENDING = 'pending-install',
- PENDINGUPGRADE = 'pending-upgrade',
- PENDINGROLLBACK = 'pending-rollback',
- SUPERSEDED = 'superseded',
- UNINSTALLED = 'uninstalled',
- UNINSTALLING = 'uninstalling',
-}
-
export function HelmSummary({ release }: Props) {
const isSuccess =
release.info?.status === DeploymentStatus.DEPLOYED ||
@@ -29,9 +24,14 @@ export function HelmSummary({ release }: Props) {
- {getText(release.info?.status)}
+ {getStatusText(release.info?.status)}
+ {!!release.info?.description && !isSuccess && (
+
+ {release.info?.description}
+
+ )}
{!!release.namespace && Namespace: {release.namespace} }
{!!release.version && Revision: #{release.version} }
@@ -47,12 +47,13 @@ export function HelmSummary({ release }: Props) {
{release.chart.metadata.version}
)}
+ {!!release.info?.last_deployed && (
+
+ Last deployed:{' '}
+ {localizeDate(new Date(release.info.last_deployed))}
+
+ )}
- {!!release.info?.description && !isSuccess && (
-
- {release.info?.description}
-
- )}
> = [
+ { label: 'View', value: 'view' },
+ {
+ label: 'Diff with previous',
+ value: 'previous',
+ disabled: disabledPreviousOption,
+ },
+ {
+ label: (
+
+ {showViewOptions && (
+ setIsUserSupplied(!isUserSupplied)}
+ data-cy="values-details-user-supplied"
+ className="font-normal control-label"
+ bold={false}
+ />
+ )}
+
+ );
+}
+
+function DiffWithSpecificRevision({
+ latestRevisionNumber,
+ earliestRevisionNumber,
+ compareRevisionNumber,
+ setCompareRevisionNumber,
+}: {
+ latestRevisionNumber: LatestRevisionNumber;
+ earliestRevisionNumber: EarliestRevisionNumber;
+ compareRevisionNumber: CompareRevisionNumber;
+ setCompareRevisionNumber: (
+ compareRevisionNumber: CompareRevisionNumber
+ ) => void;
+}) {
+ // the revision number is debounced to avoid too many requests to the backend
+ const [
+ debouncedSetCompareRevisionNumber,
+ setDebouncedSetCompareRevisionNumber,
+ ] = useDebounce(compareRevisionNumber, setCompareRevisionNumber, 500);
+
+ return (
+ <>
+ Diff with specific revision:
+ ) {
+ const inputNumber = e.target.valueAsNumber;
+ // handle out of range values
+ if (inputNumber > latestRevisionNumber) {
+ setCompareRevisionNumber(latestRevisionNumber);
+ return;
+ }
+ if (inputNumber < earliestRevisionNumber) {
+ setCompareRevisionNumber(earliestRevisionNumber);
+ return;
+ }
+ setDebouncedSetCompareRevisionNumber(inputNumber);
+ }
+}
diff --git a/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/DiffViewSection.tsx b/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/DiffViewSection.tsx
new file mode 100644
index 000000000..7871cbfa3
--- /dev/null
+++ b/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/DiffViewSection.tsx
@@ -0,0 +1,55 @@
+import { AutomationTestingProps } from '@/types';
+
+import { DiffViewer } from '@@/CodeEditor/DiffViewer';
+import { Loading } from '@@/Widget';
+import { Alert } from '@@/Alert';
+
+import { CompareRevisionNumberFetched, SelectedRevisionNumber } from './types';
+
+interface Props extends AutomationTestingProps {
+ isCompareReleaseLoading: boolean;
+ isCompareReleaseError: boolean;
+ compareRevisionNumberFetched?: CompareRevisionNumberFetched;
+ selectedRevisionNumber: SelectedRevisionNumber;
+ newText: string;
+ originalText: string;
+ id: string;
+}
+
+export function DiffViewSection({
+ isCompareReleaseLoading,
+ isCompareReleaseError,
+ compareRevisionNumberFetched,
+ selectedRevisionNumber,
+ newText,
+ originalText,
+ id,
+ 'data-cy': dataCy,
+}: Props) {
+ if (isCompareReleaseLoading) {
+ return Error loading compare values ;
+ }
+
+ return (
+
+
+ Events reflect the latest revision only.
+
+ }
+ titleIcon={null}
+ tableState={tableState}
+ isLoading={eventsQuery.isInitialLoading}
+ data-cy="k8sAppDetail-eventsTable"
+ // no widget to avoid extra padding from app/react/components/datatables/TableContainer.tsx
+ noWidget
+ />
+
+ );
+}
+
+export function useHelmEventsTableState() {
+ return useTableState(settingsStore, storageKey);
+}
+
+export function filterRelatedEvents(
+ events: Event[],
+ resources: GenericResource[]
+) {
+ const relatedUids = getReleaseUids(resources);
+ const relatedUidsSet = new Set(relatedUids);
+ return events.filter(
+ (event) =>
+ event.involvedObject.uid && relatedUidsSet.has(event.involvedObject.uid)
+ );
+}
+
+function getReleaseUids(resources: GenericResource[]) {
+ return compact(resources.map((resource) => resource.metadata.uid));
+}
diff --git a/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ManifestDetails.tsx b/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ManifestDetails.tsx
index c95886d3f..c87ad17a3 100644
--- a/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ManifestDetails.tsx
+++ b/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ManifestDetails.tsx
@@ -1,18 +1,58 @@
+import { ReactNode } from 'react';
+
import { CodeEditor } from '@@/CodeEditor';
+import { DiffViewMode } from './DiffControl';
+import { DiffViewSection } from './DiffViewSection';
+import { SelectedRevisionNumber, CompareRevisionNumberFetched } from './types';
+
type Props = {
manifest: string;
+ selectedRevisionNumber: SelectedRevisionNumber;
+ diffViewMode: DiffViewMode;
+ compareManifest?: string;
+ compareRevisionNumberFetched?: CompareRevisionNumberFetched;
+ isCompareReleaseLoading: boolean;
+ isCompareReleaseError: boolean;
+ diffControl: ReactNode;
};
-export function ManifestDetails({ manifest }: Props) {
+export function ManifestDetails({
+ manifest,
+ selectedRevisionNumber,
+ diffViewMode,
+ compareManifest,
+ compareRevisionNumberFetched,
+ isCompareReleaseLoading,
+ isCompareReleaseError,
+ diffControl,
+}: Props) {
return (
- {notes} ;
+export function NotesDetails({
+ notes,
+ selectedRevisionNumber,
+ diffViewMode,
+ compareNotes,
+ compareRevisionNumberFetched,
+ isCompareReleaseLoading,
+ isCompareReleaseError,
+ diffControl,
+}: Props) {
+ return (
+ <>
+ {diffControl}
+ {diffViewMode === 'view' ? (
+ {notes}
+ ) : (
+ ('view');
+
+ const historyQuery = useHelmHistory(
+ environmentId,
+ release.name,
+ release.namespace ?? ''
+ );
+ const earliestRevisionNumber =
+ historyQuery.data?.[historyQuery.data.length - 1]?.version ??
+ release.version ??
+ 1;
+ const latestRevisionNumber =
+ historyQuery.data?.[0]?.version ?? release.version ?? 1;
+ const { compareRelease, isCompareReleaseLoading, isCompareReleaseError } =
+ useHelmReleaseToCompare(
+ release,
+ earliestRevisionNumber,
+ latestRevisionNumber,
+ diffViewMode,
+ selectedRevision,
+ selectedCompareRevisionNumber
+ );
+
+ const { autoRefreshRate } = useHelmEventsTableState();
+ const { data: eventWarningCount } = useEvents(environmentId, {
+ namespace: release.namespace ?? '',
+ queryOptions: {
+ autoRefreshRate: autoRefreshRate * 1000,
+ select: (data) => {
+ const relatedEvents = filterRelatedEvents(
+ data,
+ release.info?.resources ?? []
+ );
+ return relatedEvents.filter((e) => e.type === 'Warning').length;
+ },
+ },
+ });
+
+ return (
+
+ onSelect={setTab}
+ selectedId={parseValidTab(tab, !!release.info?.notes)}
+ type="pills"
+ justified
+ options={helmTabs(
+ release,
+ isUserSupplied,
+ setIsUserSupplied,
+ earliestRevisionNumber,
+ latestRevisionNumber,
+ selectedRevision,
+ selectedCompareRevisionNumber,
+ setSelectedCompareRevisionNumber,
+ diffViewMode,
+ handleDiffViewChange,
+ isCompareReleaseLoading,
+ isCompareReleaseError,
+ eventWarningCount ?? 0,
+ compareRelease
+ )}
+ />
+ );
+
+ function handleDiffViewChange(diffViewMode: DiffViewMode) {
+ setDiffViewMode(diffViewMode);
+
+ if (latestRevisionNumber === earliestRevisionNumber) {
+ return;
+ }
+
+ // if the input for compare revision number is NaN, set it to the previous revision number
+ if (
+ Number.isNaN(selectedCompareRevisionNumber) &&
+ diffViewMode === 'specific'
+ ) {
+ if (selectedRevision > earliestRevisionNumber) {
+ setSelectedCompareRevisionNumber(selectedRevision - 1);
+ return;
+ }
+ // it could be useful to compare to the latest revision number if the selected revision number is the earliest revision number
+ setSelectedCompareRevisionNumber(latestRevisionNumber);
+ }
+ }
+
+ function setTab(tab: Tab) {
+ router.stateService.go('kubernetes.helm', {
+ tab,
+ });
+ }
+}
function helmTabs(
release: HelmRelease,
isUserSupplied: boolean,
- setIsUserSupplied: (isUserSupplied: boolean) => void
+ setIsUserSupplied: (isUserSupplied: boolean) => void,
+ earliestRevisionNumber: number,
+ latestRevisionNumber: number,
+ selectedRevisionNumber: number,
+ compareRevisionNumber: number,
+ setCompareRevisionNumber: (compareRevisionNumber: number) => void,
+ diffViewMode: DiffViewMode,
+ setDiffViewMode: (diffViewMode: DiffViewMode) => void,
+ isCompareReleaseLoading: boolean,
+ isCompareReleaseError: boolean,
+ eventWarningCount: number,
+ compareRelease?: HelmRelease
): Option[] {
+ // as long as the latest revision number is greater than the earliest revision number, there are changes to compare
+ const showDiffControl = latestRevisionNumber > earliestRevisionNumber;
+
return compact([
{
label: 'Resources',
id: 'resources',
children:
+
+ )}
+
+ ),
+ id: 'events',
+ children: (
+ ('resources');
- // state is here so that the state isn't lost when the tab changes
- const [isUserSupplied, setIsUserSupplied] = useState(true);
-
- return (
-
- onSelect={setTab}
- selectedId={tab}
- type="pills"
- justified
- options={helmTabs(release, isUserSupplied, setIsUserSupplied)}
- />
- );
+function parseValidTab(tab: string, hasNotes: boolean): Tab {
+ if (
+ tab === 'values' ||
+ (tab === 'notes' && hasNotes) ||
+ tab === 'manifest' ||
+ tab === 'resources' ||
+ tab === 'events'
+ ) {
+ return tab;
+ }
+ return 'resources';
}
diff --git a/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/DescribeModal.test.tsx b/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/DescribeModal.test.tsx
index a1510aef8..4442ca871 100644
--- a/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/DescribeModal.test.tsx
+++ b/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/DescribeModal.test.tsx
@@ -6,7 +6,17 @@ import { DescribeModal } from './DescribeModal';
const mockUseDescribeResource = vi.fn();
-vi.mock('yaml-schema', () => ({}));
+// Mock the CodeEditor component instead of yaml-schema
+vi.mock('@@/CodeEditor', () => ({
+ CodeEditor: ({
+ value,
+ 'data-cy': dataCy,
+ }: {
+ value: string;
+ 'data-cy'?: string;
+ }) => {value}
,
+}));
+
vi.mock('./queries/useDescribeResource', () => ({
useDescribeResource: (...args: unknown[]) => mockUseDescribeResource(...args),
}));
diff --git a/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/ResourcesTable.tsx b/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/ResourcesTable.tsx
index 6a3b35674..8469e38fe 100644
--- a/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/ResourcesTable.tsx
+++ b/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/ResourcesTable.tsx
@@ -11,6 +11,7 @@ import {
import { useTableState } from '@@/datatables/useTableState';
import { Widget } from '@@/Widget';
import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
+import { TextTip } from '@@/Tip/TextTip';
import { useHelmRelease } from '../../queries/useHelmRelease';
@@ -34,12 +35,14 @@ const settingsStore = createStore('helm-resources');
export function ResourcesTable() {
const environmentId = useEnvironmentId();
const { params } = useCurrentStateAndParams();
- const { name, namespace } = params;
+ const { name, namespace, revision } = params;
+ const revisionNumber = revision ? parseInt(revision, 10) : undefined;
const tableState = useTableState(settingsStore, storageKey);
const helmReleaseQuery = useHelmRelease(environmentId, name, namespace, {
showResources: true,
refetchInterval: tableState.autoRefreshRate * 1000,
+ revision: revisionNumber,
});
const rows = useResourceRows(helmReleaseQuery.data?.info?.resources);
@@ -48,11 +51,17 @@ export function ResourcesTable() {
+ Resources reflect the latest revision only.
+
+ }
disableSelect
getRowId={(row) => row.id}
data-cy="helm-resources-datatable"
diff --git a/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/columns/status.tsx b/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/columns/status.tsx
index b9ff43fff..cded59796 100644
--- a/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/columns/status.tsx
+++ b/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/columns/status.tsx
@@ -14,5 +14,9 @@ export const status = columnHelper.accessor((row) => row.status.label, {
function Cell({ row }: CellContext) {
const { status } = row.original;
+ if (!status.label) {
+ return '-';
+ }
+
return {status.label} ;
}
diff --git a/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ValuesDetails.tsx b/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ValuesDetails.tsx
index b1f32ca3f..7a480660c 100644
--- a/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ValuesDetails.tsx
+++ b/app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ValuesDetails.tsx
@@ -1,44 +1,74 @@
-import { Checkbox } from '@@/form-components/Checkbox';
+import { ReactNode } from 'react';
+
import { CodeEditor } from '@@/CodeEditor';
import { Values } from '../../types';
+import { DiffViewMode } from './DiffControl';
+import { DiffViewSection } from './DiffViewSection';
+import { SelectedRevisionNumber, CompareRevisionNumberFetched } from './types';
+
interface Props {
values?: Values;
isUserSupplied: boolean;
- setIsUserSupplied: (isUserSupplied: boolean) => void;
+ selectedRevisionNumber: SelectedRevisionNumber;
+ diffViewMode: DiffViewMode;
+ compareValues?: Values;
+ compareRevisionNumberFetched?: CompareRevisionNumberFetched;
+ isCompareReleaseLoading: boolean;
+ isCompareReleaseError: boolean;
+ diffControl: ReactNode;
}
-const noValuesMessage = 'No values found';
-
export function ValuesDetails({
values,
isUserSupplied,
- setIsUserSupplied,
+ selectedRevisionNumber,
+ diffViewMode,
+ compareValues,
+ compareRevisionNumberFetched,
+ isCompareReleaseLoading,
+ isCompareReleaseError,
+ diffControl,
}: Props) {
return (
-
- {/* bring in line with the code editor copy button */}
-
- setIsUserSupplied(!isUserSupplied)}
- data-cy="values-details-user-supplied"
+ <>
+ {diffControl}
+ {diffViewMode === 'view' ? (
+
-
-
(
+ `endpoints/${environmentId}/kubernetes/helm/${name}/history`,
+ {
+ params: { namespace },
+ }
+ );
+
+ return response.data;
+ } catch (error) {
+ throw parseAxiosError(error, 'Unable to retrieve helm application history');
+ }
+}
diff --git a/app/react/kubernetes/helm/HelmApplicationView/queries/useHelmRelease.ts b/app/react/kubernetes/helm/HelmApplicationView/queries/useHelmRelease.ts
index 8d41e6544..cdf465c16 100644
--- a/app/react/kubernetes/helm/HelmApplicationView/queries/useHelmRelease.ts
+++ b/app/react/kubernetes/helm/HelmApplicationView/queries/useHelmRelease.ts
@@ -6,6 +6,15 @@ import axios, { parseAxiosError } from '@/portainer/services/axios';
import { HelmRelease } from '../../types';
+type Options = {
+ select?: (data: HelmRelease) => T;
+ showResources?: boolean;
+ refetchInterval?: number;
+ enabled?: boolean;
+ staleTime?: number;
+ /** when the revision is undefined, the latest revision is fetched */
+ revision?: number;
+};
/**
* React hook to fetch a specific Helm release
*/
@@ -13,39 +22,52 @@ export function useHelmRelease(
environmentId: EnvironmentId,
name: string,
namespace: string,
- options: {
- select?: (data: HelmRelease) => T;
- showResources?: boolean;
- refetchInterval?: number;
- } = {}
+ options: Options = {}
) {
- const { select, showResources, refetchInterval } = options;
+ const { select, showResources, refetchInterval, revision, staleTime } =
+ options;
return useQuery(
- [environmentId, 'helm', 'releases', namespace, name, options.showResources],
+ [
+ environmentId,
+ 'helm',
+ 'releases',
+ namespace,
+ name,
+ revision,
+ showResources,
+ ],
() =>
getHelmRelease(environmentId, name, {
namespace,
showResources,
+ revision,
}),
{
- enabled: !!environmentId && !!name && !!namespace,
+ enabled: !!environmentId && !!name && !!namespace && options.enabled,
...withGlobalError('Unable to retrieve helm application details'),
+ retry: 3,
+ // occasionally the application shows before the release is created, take some more time to refetch
+ retryDelay: 2000,
select,
refetchInterval,
+ staleTime,
}
);
}
+type Params = {
+ namespace: string;
+ showResources?: boolean;
+ revision?: number;
+};
+
/**
* Get a specific Helm release
*/
async function getHelmRelease(
environmentId: EnvironmentId,
name: string,
- params: {
- namespace: string;
- showResources?: boolean;
- }
+ params: Params
) {
try {
const { data } = await axios.get(
diff --git a/app/react/kubernetes/helm/HelmApplicationView/queries/useHelmRepositories.ts b/app/react/kubernetes/helm/HelmApplicationView/queries/useHelmRepositories.ts
new file mode 100644
index 000000000..733b79dea
--- /dev/null
+++ b/app/react/kubernetes/helm/HelmApplicationView/queries/useHelmRepositories.ts
@@ -0,0 +1,99 @@
+import { useQuery, useQueries } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { compact, flatMap } from 'lodash';
+
+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';
+
+interface HelmSearch {
+ entries: Entries;
+}
+
+interface Entries {
+ [key: string]: { version: string }[];
+}
+
+export interface ChartVersion {
+ Repo: string;
+ Version: string;
+}
+
+/**
+ * Hook to fetch all Helm repositories for the current user
+ */
+export function useHelmRepositories() {
+ const { user } = useCurrentUser();
+ return useQuery(
+ ['helm', 'repositories'],
+ async () => getHelmRepositories(user.Id),
+ {
+ enabled: !!user.Id,
+ ...withGlobalError('Unable to retrieve helm repositories'),
+ }
+ );
+}
+
+/**
+ * React hook to get a list of available versions for a chart from specified repositories
+ *
+ * @param chart The chart name to get versions for
+ * @param repositories Array of repository URLs to search in
+ */
+export function useHelmRepoVersions(
+ chart: string,
+ staleTime: number,
+ repositories: string[] = []
+) {
+ // Fetch versions from each repository in parallel as separate queries
+ const versionQueries = useQueries({
+ queries: useMemo(
+ () =>
+ repositories.map((repo) => ({
+ queryKey: ['helm', 'repositories', chart, repo],
+ queryFn: () => getSearchHelmRepo(repo, chart),
+ enabled: !!chart && repositories.length > 0,
+ staleTime,
+ ...withGlobalError(`Unable to retrieve versions from ${repo}`),
+ })),
+ [repositories, chart, staleTime]
+ ),
+ });
+
+ // Combine the results from all repositories for easier consumption
+ const allVersions = useMemo(() => {
+ const successfulResults = compact(versionQueries.map((q) => q.data));
+ return flatMap(successfulResults);
+ }, [versionQueries]);
+
+ return {
+ data: allVersions,
+ isInitialLoading: versionQueries.some((q) => q.isLoading),
+ isError: versionQueries.some((q) => q.isError),
+ };
+}
+
+/**
+ * Get Helm repositories for user
+ */
+async function getSearchHelmRepo(
+ repo: string,
+ chart: string
+): Promise {
+ try {
+ const { data } = await axios.get(`templates/helm`, {
+ params: { repo, chart },
+ });
+ const versions = data.entries[chart];
+ return (
+ versions?.map((v) => ({
+ Repo: repo,
+ Version: v.version,
+ })) ?? []
+ );
+ } catch (err) {
+ throw parseAxiosError(err, 'Unable to retrieve helm repositories for user');
+ }
+}
diff --git a/app/react/kubernetes/helm/HelmApplicationView/queries/useUpdateHelmReleaseMutation.ts b/app/react/kubernetes/helm/HelmApplicationView/queries/useUpdateHelmReleaseMutation.ts
new file mode 100644
index 000000000..00e9f8131
--- /dev/null
+++ b/app/react/kubernetes/helm/HelmApplicationView/queries/useUpdateHelmReleaseMutation.ts
@@ -0,0 +1,44 @@
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+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';
+
+export interface UpdateHelmReleasePayload {
+ namespace: string;
+ values?: string;
+ repo?: string;
+ name: string;
+ chart: string;
+ version?: string;
+}
+export function useUpdateHelmReleaseMutation(environmentId: EnvironmentId) {
+ const queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: (payload: UpdateHelmReleasePayload) =>
+ updateHelmRelease(environmentId, payload),
+ ...withInvalidate(queryClient, [
+ [environmentId, 'helm', 'releases'],
+ applicationsQueryKeys.applications(environmentId),
+ ]),
+ ...withGlobalError('Unable to uninstall helm application'),
+ });
+}
+
+async function updateHelmRelease(
+ environmentId: EnvironmentId,
+ payload: UpdateHelmReleasePayload
+) {
+ try {
+ const { data } = await axios.post(
+ `endpoints/${environmentId}/kubernetes/helm`,
+ payload
+ );
+ return data;
+ } catch (err) {
+ throw parseAxiosError(err, 'Unable to update helm release');
+ }
+}
diff --git a/app/react/kubernetes/helm/HelmTemplates/HelmTemplates.tsx b/app/react/kubernetes/helm/HelmTemplates/HelmTemplates.tsx
index c8def2077..5fb88d64c 100644
--- a/app/react/kubernetes/helm/HelmTemplates/HelmTemplates.tsx
+++ b/app/react/kubernetes/helm/HelmTemplates/HelmTemplates.tsx
@@ -3,8 +3,11 @@ import { useState } from 'react';
import { useCurrentUser } from '@/react/hooks/useUser';
import { Chart } from '../types';
+import {
+ useHelmChartList,
+ useHelmRepositories,
+} from '../queries/useHelmChartList';
-import { useHelmChartList } from './queries/useHelmChartList';
import { HelmTemplatesList } from './HelmTemplatesList';
import { HelmTemplatesSelectedItem } from './HelmTemplatesSelectedItem';
@@ -18,10 +21,8 @@ export function HelmTemplates({ onSelectHelmChart, namespace, name }: Props) {
const [selectedChart, setSelectedChart] = useState(null);
const { user } = useCurrentUser();
- const { data: charts = [], isLoading: chartsLoading } = useHelmChartList(
- user.Id
- );
-
+ const helmReposQuery = useHelmRepositories(user.Id);
+ const chartListQuery = useHelmChartList(user.Id, helmReposQuery.data ?? []);
function clearHelmChart() {
setSelectedChart(null);
onSelectHelmChart('');
@@ -44,9 +45,9 @@ export function HelmTemplates({ onSelectHelmChart, namespace, name }: Props) {
/>
) : (
No Helm charts found
)}
- {loading && (
-
- Loading...
-
- Initial download of Helm charts can take a few minutes
-
+ {isLoading && (
+
+
+ Loading helm charts...
+
+ {charts.length === 0 && (
+
+ Initial download of Helm charts can take a few minutes
+
+ )}
)}
- {!loading && charts.length === 0 && (
+ {!isLoading && charts.length === 0 && (
No helm charts available.
diff --git a/app/react/kubernetes/helm/HelmTemplates/HelmTemplatesSelectedItem.test.tsx b/app/react/kubernetes/helm/HelmTemplates/HelmTemplatesSelectedItem.test.tsx
index 655b1d928..215838ff8 100644
--- a/app/react/kubernetes/helm/HelmTemplates/HelmTemplatesSelectedItem.test.tsx
+++ b/app/react/kubernetes/helm/HelmTemplates/HelmTemplatesSelectedItem.test.tsx
@@ -106,10 +106,7 @@ describe('HelmTemplatesSelectedItem', () => {
renderComponent();
const user = userEvent.setup();
- // First show the editor
- await user.click(await screen.findByText('Custom values'));
-
- // Verify editor is visible
+ // Verify editor is visible by default
expect(screen.getByTestId('helm-app-creation-editor')).toBeInTheDocument();
// Now hide the editor
diff --git a/app/react/kubernetes/helm/HelmTemplates/HelmTemplatesSelectedItem.tsx b/app/react/kubernetes/helm/HelmTemplates/HelmTemplatesSelectedItem.tsx
index 088c0c69a..baffb9655 100644
--- a/app/react/kubernetes/helm/HelmTemplates/HelmTemplatesSelectedItem.tsx
+++ b/app/react/kubernetes/helm/HelmTemplates/HelmTemplatesSelectedItem.tsx
@@ -143,7 +143,12 @@ export function HelmTemplatesSelectedItem({
{({ values, setFieldValue }) => (