From afe4ca14ef2ae2d27e797595da0229568c807a88 Mon Sep 17 00:00:00 2001 From: naorzr Date: Thu, 13 Jul 2023 21:25:49 +0300 Subject: [PATCH 1/3] local charts --- dashboard/src/API/interfaces.ts | 14 +++-- dashboard/src/API/repositories.ts | 9 ++-- .../InstallChartModal/InstallChartModal.tsx | 54 +++++++++---------- .../InstallChartModal/VersionToInstall.tsx | 7 +-- 4 files changed, 44 insertions(+), 40 deletions(-) diff --git a/dashboard/src/API/interfaces.ts b/dashboard/src/API/interfaces.ts index 550efee4..4d6ddc35 100644 --- a/dashboard/src/API/interfaces.ts +++ b/dashboard/src/API/interfaces.ts @@ -60,12 +60,18 @@ export interface ChartList { } export interface LatestChartVersion { - name: string; - version: string; - isSuggestedRepo: boolean; - repository: string; + name: string + version: string + app_version: string + description: string + installed_namespace: string + installed_name: string + repository: string + urls: string[] + isSuggestedRepo: boolean } + export interface ChartVersions { versions: string[]; } diff --git a/dashboard/src/API/repositories.ts b/dashboard/src/API/repositories.ts index be677d13..0572bc93 100644 --- a/dashboard/src/API/repositories.ts +++ b/dashboard/src/API/repositories.ts @@ -125,18 +125,15 @@ function useGetChartValues( export function useChartRepoValues( namespace: string, - chartName: string, - repository: string, version: string, + chart: string, options?: UseQueryOptions ) { return useQuery( - ["values", namespace, chartName, repository], + ["values", namespace, chart], () => callApi( - `/api/helm/repositories/values?chart=${ - repository ? `${repository}/` : "" - }${chartName}&version=${version}`, + `/api/helm/repositories/values?chart=${chart}&version=${version}`, { headers: { "Content-Type": "text/plain; charset=utf-8" }, } diff --git a/dashboard/src/components/modal/InstallChartModal/InstallChartModal.tsx b/dashboard/src/components/modal/InstallChartModal/InstallChartModal.tsx index d0034325..76aa93af 100644 --- a/dashboard/src/components/modal/InstallChartModal/InstallChartModal.tsx +++ b/dashboard/src/components/modal/InstallChartModal/InstallChartModal.tsx @@ -46,12 +46,12 @@ export const InstallChartModal = ({ const { namespace: queryNamespace, - chart: releaseName, + chart: _releaseName, revision, context: selectedCluster, } = useParams(); const [namespace, setNamespace] = useState(queryNamespace); - const [chart, setChart] = useState(chartName); + const [releaseName, setReleaseName] = useState(isInstall ? chartName : _releaseName); const { error: versionsError, data: _versions } = useGetVersions(chartName, { select: (data) => { @@ -64,7 +64,7 @@ export const InstallChartModal = ({ ({ version }) => version === (isUpgrade ? latestVersion : currentlyInstalledChartVersion) - ) || { version: "", repository: "" }; + ) || { version: "", repository: "", urls: [] }; setSelectedVersionData(selectedVersion); }, @@ -79,8 +79,13 @@ export const InstallChartModal = ({ const [selectedVersionData, setSelectedVersionData] = useState<{ version: string; repository?: string; + urls: string[]; }>(); + const chart = useMemo(() => { + return selectedVersionData?.urls[0].startsWith('file://') ? selectedVersionData?.urls[0] : `${selectedVersionData?.repository}/${chartName}`; + }, [selectedVersionData, chartName]) + const selectedVersion = useMemo(() => { return selectedVersionData?.version; }, [selectedVersionData]); @@ -95,9 +100,8 @@ export const InstallChartModal = ({ refetch: refetchChartValues, } = useChartRepoValues( namespace || "default", - chartName, - selectedRepo || "", selectedVersion || "", + chart, { enabled: isInstall && Boolean(selectedRepo) && selectedRepo !== "", onSuccess: (data) => { @@ -136,24 +140,24 @@ export const InstallChartModal = ({ [ "setVersion", namespace, - chart, + releaseName, selectedVersion, selectedRepo, selectedCluster, + chart ], async () => { setErrorMessage(""); const formData = new FormData(); formData.append("preview", "false"); - formData.append("chart", `${selectedRepo}/${chartName}`); + formData.append("chart", chart); formData.append("version", selectedVersion || ""); formData.append("values", userValues); - formData.append("name", chart); + formData.append("name", releaseName || ""); const res = await fetch( // Todo: Change to BASE_URL from env - `/api/helm/releases/${namespace ? namespace : "default"}${ - !isInstall ? `/${releaseName}` : `/${releaseValues ? chartName : ""}` // if there is no release we don't provide anything, and we dont display version + `/api/helm/releases/${namespace ? namespace : "default"}${!isInstall ? `/${releaseName}` : `/${releaseValues ? chartName : ""}` // if there is no release we don't provide anything, and we dont display version }`, { method: "post", @@ -181,10 +185,9 @@ export const InstallChartModal = ({ `/${selectedCluster}/${response.namespace}/${response.name}/installed/revision/1` ); } else { - setSelectedVersionData({ version: "" }); //cleanup + setSelectedVersionData({ version: "", urls: [] }); //cleanup navigate( - `/${selectedCluster}/${ - namespace ? namespace : "default" + `/${selectedCluster}/${namespace ? namespace : "default" }/${releaseName}/installed/revision/${response.version}` ); window.location.reload(); @@ -199,7 +202,7 @@ export const InstallChartModal = ({ const getVersionManifestFormData = useCallback( ({ version, userValues }: { version: string; userValues?: string }) => { const formData = new FormData(); - formData.append("chart", `${selectedRepo}/${chartName}`); + formData.append("chart", chart); formData.append("version", version); formData.append( "values", @@ -210,7 +213,7 @@ export const InstallChartModal = ({ return formData; }, - [userValues, selectedRepo, chartName] + [userValues, chart, chartName] ); // It actually fetches the manifest for the diffs @@ -222,13 +225,11 @@ export const InstallChartModal = ({ userValues?: string; }) => { const formData = getVersionManifestFormData({ version, userValues }); - const fetchUrl = `/api/helm/releases/${ - namespace ? namespace : isInstall ? "" : "[empty]" - }${ - !isInstall + const fetchUrl = `/api/helm/releases/${namespace ? namespace : isInstall ? "" : "[empty]" + }${!isInstall ? `/${releaseName}` : `${releaseValues ? chartName : !namespace ? "default" : ""}` - }`; // if there is no release we don't provide anything, and we dont display version; + }`; // if there is no release we don't provide anything, and we dont display version; try { setErrorMessage(""); const data = await callApi(fetchUrl, { @@ -289,7 +290,7 @@ export const InstallChartModal = ({ { - setSelectedVersionData({ version: "" }); + setSelectedVersionData({ version: "", urls: [] }); if (!isInstall) { setUserValues(releaseValues); fetchDiff({ userValues: releaseValues }); @@ -298,9 +299,8 @@ export const InstallChartModal = ({ }} title={
- {`${ - isUpgrade || (!isUpgrade && !isInstall) ? "Upgrade" : "Install" - } `} + {`${isUpgrade || (!isUpgrade && !isInstall) ? "Upgrade" : "Install" + } `} {(isUpgrade || releaseValues || isInstall) && ( {chartName} )} @@ -331,11 +331,11 @@ export const InstallChartModal = ({ /> )} setChart(releaseName)} - onNamespaceInput={(namespace) => setNamespace(namespace)} + onReleaseNameInput={setReleaseName} + onNamespaceInput={setNamespace} />
; - onSelectVersion: (props: { version: string; repository: string }) => void; + onSelectVersion: (props: { version: string; repository: string; urls: string[] }) => void; isInstall?: boolean; }> = ({ versions, onSelectVersion, isInstall }) => { const chartVersion = versions.find( @@ -27,8 +28,8 @@ export const VersionToInstall: React.FC<{ // Prepare your options for react-select const options = - versions.map(({ repository, version }) => ({ - value: { repository, version }, + versions.map(({ repository, version, urls }) => ({ + value: { repository, version, urls }, label: `${repository} @ ${version}`, check: chartVersion === version, })) || []; From fb114da563ec22420ff144a57b79ffb16c3b620c Mon Sep 17 00:00:00 2001 From: naorzr Date: Sun, 16 Jul 2023 19:22:48 +0300 Subject: [PATCH 2/3] fix version to install --- .../InstallChartModal/InstallChartModal.tsx | 26 +++++++------- .../InstallChartModal/VersionToInstall.tsx | 34 +++++++++++-------- 2 files changed, 33 insertions(+), 27 deletions(-) diff --git a/dashboard/src/components/modal/InstallChartModal/InstallChartModal.tsx b/dashboard/src/components/modal/InstallChartModal/InstallChartModal.tsx index 76aa93af..9ec51f62 100644 --- a/dashboard/src/components/modal/InstallChartModal/InstallChartModal.tsx +++ b/dashboard/src/components/modal/InstallChartModal/InstallChartModal.tsx @@ -49,6 +49,7 @@ export const InstallChartModal = ({ chart: _releaseName, revision, context: selectedCluster, + selectedRepo: currentRepoCtx, } = useParams(); const [namespace, setNamespace] = useState(queryNamespace); const [releaseName, setReleaseName] = useState(isInstall ? chartName : _releaseName); @@ -60,13 +61,12 @@ export const InstallChartModal = ({ ); }, onSuccess: (data) => { - const selectedVersion = (data || []).find( - ({ version }) => - version === - (isUpgrade ? latestVersion : currentlyInstalledChartVersion) - ) || { version: "", repository: "", urls: [] }; - - setSelectedVersionData(selectedVersion); + const empty = { version: "", repository: "", urls: [] } + if (!isInstall) { + return setSelectedVersionData(data[0] ?? empty); + } + const versionsToRepo = data.filter(v => v.repository === currentRepoCtx) + return setSelectedVersionData(versionsToRepo[0] ?? empty); }, }); @@ -82,9 +82,6 @@ export const InstallChartModal = ({ urls: string[]; }>(); - const chart = useMemo(() => { - return selectedVersionData?.urls[0].startsWith('file://') ? selectedVersionData?.urls[0] : `${selectedVersionData?.repository}/${chartName}`; - }, [selectedVersionData, chartName]) const selectedVersion = useMemo(() => { return selectedVersionData?.version; @@ -94,6 +91,10 @@ export const InstallChartModal = ({ return selectedVersionData?.repository; }, [selectedVersionData]); + const chart = useMemo(() => { + return selectedVersionData?.urls?.[0]?.startsWith('file://') ? selectedVersionData?.urls[0] : `${selectedVersionData?.repository}/${chartName}`; + }, [selectedVersionData, chartName]) + const { data: chartValues, isLoading: loadingChartValues, @@ -324,9 +325,8 @@ export const InstallChartModal = ({ {versions && isNoneEmptyArray(versions) && ( { - setSelectedVersionData(versionData); - }} + initialVersion={selectedVersionData} + onSelectVersion={setSelectedVersionData} isInstall={isInstall} /> )} diff --git a/dashboard/src/components/modal/InstallChartModal/VersionToInstall.tsx b/dashboard/src/components/modal/InstallChartModal/VersionToInstall.tsx index eba46bb3..95f3ea0d 100644 --- a/dashboard/src/components/modal/InstallChartModal/VersionToInstall.tsx +++ b/dashboard/src/components/modal/InstallChartModal/VersionToInstall.tsx @@ -1,21 +1,26 @@ -import { useState } from "react"; +import { useMemo, useState } from "react"; import Select, { components } from "react-select"; import { BsCheck2 } from "react-icons/bs"; import { NonEmptyArray } from "../../../data/types"; +interface Version { + repository: string; + version: string; + isChartVersion: boolean; + urls: string[]; +} export const VersionToInstall: React.FC<{ - versions: NonEmptyArray<{ - repository: string; - version: string; - isChartVersion: boolean; - urls: string[]; - }>; + versions: NonEmptyArray; + initialVersion?: { + repository?: string; + version?: string; + }; onSelectVersion: (props: { version: string; repository: string; urls: string[] }) => void; isInstall?: boolean; -}> = ({ versions, onSelectVersion, isInstall }) => { - const chartVersion = versions.find( +}> = ({ versions, onSelectVersion, isInstall, initialVersion }) => { + const chartVersion = useMemo(() => versions.find( ({ isChartVersion }) => isChartVersion - )?.version; + )?.version, [versions]); const currentVersion = chartVersion && !isInstall ? ( @@ -33,11 +38,12 @@ export const VersionToInstall: React.FC<{ label: `${repository} @ ${version}`, check: chartVersion === version, })) || []; - const [selectedOption, setSelectedOption] = useState(options[0]); - + const [selectedOption, setSelectedOption] = useState(); + const initOpt = useMemo(() => options.find(({ value }) => value.version === initialVersion?.version && value.repository === initialVersion?.repository), [options, initialVersion]); + console.log({selectedOption, initialVersion}) return (
- {versions?.length ? ( + {(versions?.length && (selectedOption || initOpt)) ? ( <> Version to install:{" "}