Fix/chart-link-cluster-mode (#474)

frontend/src/API/apiService.ts

@@ -116,7 +116,9 @@ class ApiService {
   }): Promise<ReleaseHealthStatus[] | null> => {
     if (!release) return null;
 
-    const data = await this.fetchWithDefaults(
+    const data = await this.fetchWithDefaults<
+      Promise<ReleaseHealthStatus[] | null>
+    >(
       `/api/helm/releases/${release.namespace}/${release.name}/resources?health=true`
     );
     return data;
@@ -129,14 +131,21 @@ class ApiService {
 
     if (!params.namespace || !params.chart) return [];
 
-    const data = await this.fetchWithDefaults(
+    const data = await this.fetchWithDefaults<ReleaseRevision[]>(
       `/api/helm/releases/${params.namespace}/${params.chart}/history`
     );
 
     return data;
   };
 
-  getValues = async ({ queryKey }: any) => {
+  getValues = async ({
+    queryKey,
+  }: {
+    queryKey: [
+      string,
+      { namespace: string; chart: { name: string }; version: number }
+    ];
+  }) => {
     const [, params] = queryKey;
     const { namespace, chart, version } = params;
 

frontend/src/API/interfaces.ts

@@ -26,7 +26,7 @@ export interface Scanner {
 
 export interface ScanResult {
   scannerType: string;
-  result: any;
+  result: string;
 }
 
 export interface ScannersList {

frontend/src/API/releases.ts

@@ -16,16 +16,43 @@ export function useGetInstalledReleases(
 ) {
   return useQuery<Release[]>(
     ["installedReleases", context],
-    () =>
-      apiService.fetchWithDefaults<Release[]>("/api/helm/releases", {
-        headers: {
-          "X-Kubecontext": context,
-        },
-      }),
+    () => apiService.fetchWithDefaults<Release[]>("/api/helm/releases"),
     options
   );
 }
 
+export interface ReleaseManifest {
+  apiVersion: string;
+  kind: string;
+  metadata: {
+    name: string;
+    namespace: string;
+    labels: Record<string, string>;
+  };
+  spec: {
+    replicas: number;
+    selector: Record<string, string>;
+    template: {
+      metadata: {
+        labels: Record<string, string>;
+      };
+      spec: {
+        containers: {
+          name: string;
+          image: string;
+          ports: {
+            containerPort: number;
+          }[];
+          env: {
+            name: string;
+            value: string;
+          }[];
+        }[];
+      };
+    };
+  };
+}
+
 export function useGetReleaseManifest({
   namespace,
   chartName,
@@ -33,12 +60,12 @@ export function useGetReleaseManifest({
 }: {
   namespace: string;
   chartName: string;
-  options?: UseQueryOptions<any>;
+  options?: UseQueryOptions<ReleaseManifest[]>;
 }) {
-  return useQuery<any>(
+  return useQuery<ReleaseManifest[]>(
     ["manifest", namespace, chartName],
     () =>
-      apiService.fetchWithDefaults<any>(
+      apiService.fetchWithDefaults<ReleaseManifest[]>(
         `/api/helm/releases/${namespace}/${chartName}/manifests`
       ),
     options
@@ -219,12 +246,12 @@ export function useChartReleaseValues({
   userDefinedValue?: string;
   revision?: number;
   version?: string;
-  options?: UseQueryOptions<any>;
+  options?: UseQueryOptions<unknown>;
 }) {
-  return useQuery<any>(
+  return useQuery<unknown>(
     ["values", namespace, release, userDefinedValue, version],
     () =>
-      apiService.fetchWithDefaults<any>(
+      apiService.fetchWithDefaults<unknown>(
         `/api/helm/releases/${namespace}/${release}/values?${"userDefined=true"}${
           revision ? `&revision=${revision}` : ""
         }`,
@@ -253,7 +280,7 @@ export const useVersionData = ({
   namespace: string;
   releaseName: string;
   isInstallRepoChart?: boolean;
-  options?: UseQueryOptions<any>;
+  options?: UseQueryOptions;
 }) => {
   return useQuery(
     [
@@ -287,7 +314,7 @@ export const useVersionData = ({
 
       return data;
     },
-
+    // @ts-ignore
     options
   );
 };
@@ -311,12 +338,12 @@ export interface StructuredResources {
 export interface Metadata {
   name: string;
   namespace: string;
-  creationTimestamp: any;
-  labels: any;
+  creationTimestamp: Date;
+  labels: string[];
 }
 
 export interface Spec {
-  [key: string]: any;
+  [key: string]: string;
 }
 
 export interface Status {
@@ -326,8 +353,8 @@ export interface Status {
 export interface Condition {
   type: string;
   status: string;
-  lastProbeTime: any;
-  lastTransitionTime: any;
+  lastProbeTime: Date;
+  lastTransitionTime: Date;
   reason: string;
   message: string;
 }

frontend/src/API/repositories.ts

@@ -56,10 +56,10 @@ export function useChartRepoValues({
   version: string;
   chart: string;
 }) {
-  return useQuery<any>(
+  return useQuery<string>(
     ["helm", "repositories", "values", chart, version],
     () =>
-      apiService.fetchWithDefaults<any>(
+      apiService.fetchWithDefaults<string>(
         `/api/helm/repositories/values?chart=${chart}&version=${version}`,
         {
           headers: { "Content-Type": "text/plain; charset=utf-8" },

frontend/src/API/shared.ts

@@ -40,7 +40,7 @@ export const useDiffData = ({
   selectedRepo: string;
   versionsError: string;
   currentVerManifest: string;
-  selectedVerData: any;
+  selectedVerData: { [key: string]: string };
   chart: string;
 }) => {
   return useQuery(

frontend/src/App.tsx

@@ -55,7 +55,7 @@ export default function App() {
             <Routes>
               <Route path="docs/" element={<DocsPage />} />
               <Route path="*" element={<PageLayout />}>
-                <Route path=":context/*" element={<SyncContext />}>
+                <Route path=":context?/*" element={<SyncContext />}>
                   <Route path="installed/?" element={<Installed />} />
                   <Route
                     path=":namespace/:chart/installed/revision/:revision"

frontend/src/components/InstalledPackages/InstalledPackageCard.tsx

@@ -15,7 +15,6 @@ import { useGetLatestVersion } from "../../API/releases";
 import { isNewerVersion } from "../../utils";
 import { LatestChartVersion } from "../../API/interfaces";
 import useNavigateWithSearchParams from "../../hooks/useNavigateWithSearchParams";
-import { useParams } from "react-router-dom";
 
 type InstalledPackageCardProps = {
   release: Release;
@@ -26,7 +25,6 @@ export default function InstalledPackageCard({
 }: InstalledPackageCardProps) {
   const navigate = useNavigateWithSearchParams();
 
-  const { context: selectedCluster } = useParams();
   const [isMouseOver, setIsMouseOver] = useState(false);
 
   const { data: latestVersionResult } = useGetLatestVersion(release.chartName, {
@@ -34,7 +32,7 @@ export default function InstalledPackageCard({
     cacheTime: 0,
   });
 
-  const { data: statusData } = useQuery<any>({
+  const { data: statusData } = useQuery<unknown>({
     queryKey: ["resourceStatus", release],
     queryFn: () => apiService.getResourceStatus({ release }),
   });
@@ -61,10 +59,9 @@ export default function InstalledPackageCard({
 
   const handleOnClick = () => {
     const { name, namespace } = release;
-    navigate(
-      `/${selectedCluster}/${namespace}/${name}/installed/revision/${release.revision}`,
-      { state: release }
-    );
+    navigate(`/${namespace}/${name}/installed/revision/${release.revision}`, {
+      state: release,
+    });
   };
 
   const statusColor = getStatusColor(release.status as DeploymentStatus);

frontend/src/components/LinkWithSearchParams.tsx

@@ -1,4 +1,5 @@
-import { NavLink, useLocation } from "react-router-dom";
+import { NavLink, useLocation, useParams } from "react-router-dom";
+import { useAppContext } from "../context/AppContext";
 
 const LinkWithSearchParams = ({
   to,
@@ -11,14 +12,22 @@ const LinkWithSearchParams = ({
   children: React.ReactNode;
 }) => {
   const { search } = useLocation();
-  const params = new URLSearchParams(search);
+  const { context } = useParams();
+  const {clusterMode} = useAppContext();
 
+  const params = new URLSearchParams(search);
   // For state we don't want to keep while navigating
   props.exclude?.forEach((key) => {
     params.delete(key);
   });
 
-  return <NavLink to={`${to}/?${params.toString()}`} {...props} />;
+  let prefixedUrl = to;
+
+  if (!clusterMode) {
+    prefixedUrl = `/${context}${to}`;
+  }
+
+  return <NavLink to={`${prefixedUrl}/?${params.toString()}`} {...props} />;
 };
 
 export default LinkWithSearchParams;

frontend/src/components/modal/AddRepositoryModal.tsx

@@ -5,7 +5,7 @@ import useAlertError from "../../hooks/useAlertError";
 import useCustomSearchParams from "../../hooks/useCustomSearchParams";
 import { useAppContext } from "../../context/AppContext";
 import { useQueryClient } from "@tanstack/react-query";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import apiService from "../../API/apiService";
 
 interface FormKeys {
@@ -27,7 +27,6 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
   const { searchParamsObject } = useCustomSearchParams();
   const { repo_url, repo_name } = searchParamsObject;
   const { setSelectedRepo } = useAppContext();
-  const { context } = useParams();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
@@ -45,10 +44,11 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
 
     setIsLoading(true);
 
-    apiService.fetchWithDefaults<void>("/api/helm/repositories", {
-      method: "POST",
-      body,
-    })
+    apiService
+      .fetchWithDefaults<void>("/api/helm/repositories", {
+        method: "POST",
+        body,
+      })
       .then(() => {
         setIsLoading(false);
         onClose();
@@ -57,7 +57,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
           queryKey: ["helm", "repositories"],
         });
         setSelectedRepo(formData.name || "");
-        navigate(`/${context}/repository/${formData.name}`, {
+        navigate(`/repository/${formData.name}`, {
           replace: true,
         });
       })

frontend/src/components/modal/InstallChartModal/InstallReleaseChartModal.tsx

@@ -1,5 +1,4 @@
 import { useParams } from "react-router-dom";
-import useAlertError from "../../../hooks/useAlertError";
 import { useMemo, useState } from "react";
 import {
   useChartReleaseValues,
@@ -19,6 +18,7 @@ import { useChartRepoValues } from "../../../API/repositories";
 import { useDiffData } from "../../../API/shared";
 import { InstallChartModalProps } from "../../../data/types";
 import { DefinedValues } from "./DefinedValues";
+import apiService from "../../../API/apiService";
 
 export const InstallReleaseChartModal = ({
   isOpen,
@@ -30,7 +30,6 @@ export const InstallReleaseChartModal = ({
   latestRevision,
 }: InstallChartModalProps) => {
   const navigate = useNavigateWithSearchParams();
-  const { setShowErrorModal } = useAlertError();
   const [userValues, setUserValues] = useState<string>();
   const [installError, setInstallError] = useState("");
 
@@ -150,35 +149,23 @@ export const InstallReleaseChartModal = ({
       formData.append("version", selectedVersion || "");
       formData.append("values", userValues || releaseValues || ""); // if userValues is empty, we use the release values
 
-      const res = await fetch(
-        // Todo: Change to BASE_URL from env
+      const data = await apiService.fetchWithDefaults(
         `/api/helm/releases/${
           namespace ? namespace : "default"
         }${`/${releaseName}`}`,
         {
           method: "post",
           body: formData,
-          headers: {
-            "X-Kubecontext": selectedCluster as string,
-          },
         }
       );
-
-      if (!res.ok) {
-        setShowErrorModal({
-          title: "Failed to upgrade the chart",
-          msg: String(await res.text()),
-        });
-      }
-
-      return res.json();
+      return data;
     },
     {
       onSuccess: async (response) => {
         onClose();
         setSelectedVersionData({ version: "", urls: [] }); //cleanup
         navigate(
-          `/${selectedCluster}/${
+          `/${
             namespace ? namespace : "default"
           }/${releaseName}/installed/revision/${response.version}`
         );

frontend/src/components/modal/InstallChartModal/InstallRepoChartModal.tsx

@@ -1,5 +1,4 @@
 import { useParams } from "react-router-dom";
-import useAlertError from "../../../hooks/useAlertError";
 import { useMemo, useState } from "react";
 import { useGetVersions, useVersionData } from "../../../API/releases";
 import Modal, { ModalButtonStyle } from "../Modal";
@@ -13,6 +12,7 @@ import { isNewerVersion, isNoneEmptyArray } from "../../../utils";
 import { useDiffData } from "../../../API/shared";
 import { InstallChartModalProps } from "../../../data/types";
 import { DefinedValues } from "./DefinedValues";
+import apiService from "../../../API/apiService";
 
 export const InstallRepoChartModal = ({
   isOpen,
@@ -22,7 +22,6 @@ export const InstallRepoChartModal = ({
   latestVersion,
 }: InstallChartModalProps) => {
   const navigate = useNavigateWithSearchParams();
-  const { setShowErrorModal } = useAlertError();
   const [userValues, setUserValues] = useState("");
   const [installError, setInstallError] = useState("");
 
@@ -130,32 +129,20 @@ export const InstallRepoChartModal = ({
       formData.append("version", selectedVersion || "");
       formData.append("values", userValues);
       formData.append("name", releaseName || "");
-      const res = await fetch(
-        // Todo: Change to BASE_URL from env
+      const data = await apiService.fetchWithDefaults(
         `/api/helm/releases/${namespace ? namespace : "default"}`,
         {
           method: "post",
           body: formData,
-          headers: {
-            "X-Kubecontext": selectedCluster as string,
-          },
         }
       );
-
-      if (!res.ok) {
-        setShowErrorModal({
-          title: "Failed to install the chart",
-          msg: String(await res.text()),
-        });
-      }
-
-      return res.json();
+      return data;
     },
     {
       onSuccess: async (response) => {
         onClose();
         navigate(
-          `/${selectedCluster}/${response.namespace}/${response.name}/installed/revision/1`
+          `/${response.namespace}/${response.name}/installed/revision/1`
         );
       },
       onError: (error) => {

frontend/src/components/repository/RepositoryViewer.tsx

@@ -6,7 +6,7 @@ import apiService from "../../API/apiService";
 import Spinner from "../Spinner";
 import { useUpdateRepo } from "../../API/repositories";
 import { useEffect, useMemo, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useAppContext } from "../../context/AppContext";
 
 type RepositoryViewerProps = {
@@ -16,7 +16,6 @@ type RepositoryViewerProps = {
 function RepositoryViewer({ repository }: RepositoryViewerProps) {
   const [searchValue, setSearchValue] = useState("");
   const [isRemoveLoading, setIsRemove] = useState(false);
-  const { context } = useParams();
   const { setSelectedRepo, selectedRepo } = useAppContext();
   const queryClient = useQueryClient();
 
@@ -54,7 +53,7 @@ function RepositoryViewer({ repository }: RepositoryViewerProps) {
             method: "DELETE",
           }
         );
-        navigate(`/${context}/repository`, { replace: true });
+        navigate("/repository", { replace: true });
         setSelectedRepo("");
         queryClient.invalidateQueries({
           queryKey: ["helm", "repositories"],

frontend/src/components/revision/RevisionDetails.tsx

@@ -23,7 +23,7 @@ import {
 import RevisionDiff from "./RevisionDiff";
 import RevisionResource from "./RevisionResource";
 import Tabs from "../Tabs";
-import { useMutation } from "@tanstack/react-query";
+import { type UseQueryResult, useMutation } from "@tanstack/react-query";
 import Modal, { ModalButtonStyle } from "../modal/Modal";
 import Spinner from "../Spinner";
 import useAlertError from "../../hooks/useAlertError";
@@ -125,10 +125,10 @@ export default function RevisionDetails({
         ns: namespace,
         name: chart,
       });
-    } catch (error: any) {
+    } catch (error: unknown) {
       setShowErrorModal({
         title: "Test failed to run",
-        msg: error.message,
+        msg: (error as Error).message,
       });
     }
     setShowTestResults(true);
@@ -207,7 +207,7 @@ export default function RevisionDetails({
               <span
                 onClick={() => {
                   navigate(
-                    `/${context}/repository?add_repo=true&repo_url=${latestVerData[0].urls[0]}&repo_name=${latestVerData[0].repository}`
+                    `/repository?add_repo=true&repo_url=${latestVerData[0].urls[0]}&repo_name=${latestVerData[0].repository}`
                   );
                 }}
                 className="underline text-sm cursor-pointer text-blue-600"
@@ -320,7 +320,7 @@ const Rollback = ({
   release: Release;
   installedRevision: ReleaseRevision;
 }) => {
-  const { chart, namespace, revision, context } = useParams();
+  const { chart, namespace, revision } = useParams();
   const navigate = useNavigateWithSearchParams();
 
   const [showRollbackDiff, setShowRollbackDiff] = useState(false);
@@ -330,9 +330,7 @@ const Rollback = ({
     useRollbackRelease({
       onSuccess: () => {
         navigate(
-          `/${context}/${namespace}/${chart}/installed/revision/${
-            revisionInt + 1
-          }`
+          `/${namespace}/${chart}/installed/revision/${revisionInt + 1}`
         );
         window.location.reload();
       },
@@ -398,7 +396,11 @@ const Rollback = ({
     );
   };
 
-  const RollbackModalContent = ({ dataResponse }: { dataResponse: any }) => {
+  const RollbackModalContent = ({
+    dataResponse,
+  }: {
+    dataResponse: UseQueryResult<string, unknown>;
+  }) => {
     const {
       data,
       isLoading,

frontend/src/components/revision/RevisionsList.tsx

@@ -18,10 +18,11 @@ export default function RevisionsList({
   selectedRevision,
 }: RevisionsListProps) {
   const navigate = useNavigateWithSearchParams();
-  const { context, namespace, chart } = useParams();
+  const { namespace, chart } = useParams();
+
   const changeRelease = (newRevision: number) => {
     navigate(
-      `/${context}/${namespace}/${chart}/installed/revision/${newRevision}`
+      `/${namespace}/${chart}/installed/revision/${newRevision}`
     );
   };
 

frontend/src/hooks/useNavigateWithSearchParams.ts

@@ -1,10 +1,27 @@
-import { useLocation, useNavigate } from "react-router-dom";
+import {
+  type NavigateOptions,
+  useLocation,
+  useNavigate,
+  useParams,
+} from "react-router-dom";
+import { useAppContext } from "../context/AppContext";
 
 const useNavigateWithSearchParams = () => {
   const navigate = useNavigate();
+  const { clusterMode } = useAppContext();
+  const { context } = useParams();
+
   const { search } = useLocation();
-  const navigateWithSearchParams = (url: string, ...restArgs: any[]) => {
-    navigate(url + search, ...restArgs);
+  const navigateWithSearchParams = (
+    url: string,
+    ...restArgs: NavigateOptions[]
+  ) => {
+    let prefixedUrl = url;
+
+    if (!clusterMode) {
+      prefixedUrl = `/${context}${url}`;
+    }
+    navigate(`${prefixedUrl}${search}`, ...restArgs);
   };
 
   return navigateWithSearchParams;

frontend/src/layout/Header.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import LogoHeader from "../assets/logo-header.svg";
 import DropDown from "../components/common/DropDown";
 import WatcherIcon from "../assets/k8s-watcher.svg";
@@ -22,7 +22,7 @@ export default function Header() {
       setClusterMode(data.ClusterMode);
     },
   });
-  const { context } = useParams();
+
   const location = useLocation();
 
   const openSupportChat = () => {
@@ -58,7 +58,7 @@ export default function Header() {
   return (
     <div className="h-16 flex items-center justify-between bg-white custom-shadow">
       <div className="h-16 flex items-center gap-6 min-w-fit ">
-        <LinkWithSearchParams to={`/${context}/installed`} exclude={["tab"]}>
+        <LinkWithSearchParams to={"/installed"} exclude={["tab"]}>
           <img
             src={LogoHeader}
             alt="helm dashboard logo"
@@ -70,7 +70,7 @@ export default function Header() {
           <ul className="w-full items-center flex md:flex-row md:justify-between md:mt-0 md:text-sm md:font-normal md:border-0 ">
             <li>
               <LinkWithSearchParams
-                to={`/${context}/installed`}
+                to={"/installed"}
                 exclude={["tab"]}
                 className={getBtnStyle("installed")}
               >
@@ -79,7 +79,7 @@ export default function Header() {
             </li>
             <li>
               <LinkWithSearchParams
-                to={`/${context}/repository`}
+                to={"/repository"}
                 exclude={["tab"]}
                 end={false}
                 className={getBtnStyle("repository")}

frontend/src/pages/Repository.tsx

@@ -15,7 +15,7 @@ function RepositoryPage() {
   const { setSelectedRepo, selectedRepo } = useAppContext();
 
   const handleRepositoryChanged = (selectedRepository: Repository) => {
-    navigate(`/${context}/repository/${selectedRepository.name}`, {
+    navigate(`/repository/${selectedRepository.name}`, {
       replace: true,
     });
   };
@@ -28,7 +28,7 @@ function RepositoryPage() {
 
   useEffect(() => {
     if (selectedRepo && !repoFromParams) {
-      navigate(`/${context}/repository/${selectedRepo}`, {
+      navigate(`/repository/${selectedRepo}`, {
         replace: true,
       });
     }