fixes (#428)

komodorio · Jul 7, 2023 · 9d2455f · 9d2455f
1 parent 1fbdc8d
commit 9d2455f
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 114 deletions.
diff --git a/dashboard/src/API/apiService.ts b/dashboard/src/API/apiService.ts
@@ -1,43 +1,64 @@
 import { Chart, ChartVersion, Release, ReleaseHealthStatus, Repository } from "../data/types";
 import { QueryFunctionContext } from "@tanstack/react-query";
-
+interface ClustersResponse {
+  AuthInfo: string
+  Cluster: string
+  IsCurrent: boolean
+  Name: string
+  Namespace: string
+}
 class ApiService {
-  constructor(protected readonly isMockMode: boolean = false) {}
-
+  currentCluster: string = "";
+  constructor(protected readonly isMockMode: boolean = false) { }
+
+  setCluster = (cluster: string) => {
+    this.currentCluster = cluster;
+  }
+
+  public fetchWithDefaults = async (url: string, options?: RequestInit) => {
+    if (this.currentCluster) {
+      const headers = new Headers(options?.headers);
+      if (!headers.has("X-Kubecontext")) {
+        headers.set("X-Kubecontext", this.currentCluster);
+      }
+      return fetch(url, { ...options, headers });
+    }
+    return fetch(url, options);
+  }
   getToolVersion = async () => {
     const response = await fetch(`/status`);
     const data = await response.json();
     return data;
   };
 
   getRepositoryLatestVersion = async (repositoryName: string) => {
-    const response = await fetch(
+    const response = await this.fetchWithDefaults(
       `/api/helm/repositories/latestver?name=${repositoryName}`
     );
     const data = await response.json();
     return data;
   };
 
   getInstalledReleases = async () => {
-    const response = await fetch(`/api/helm/releases`);
+    const response = await this.fetchWithDefaults(`/api/helm/releases`);
     const data = await response.json();
     return data;
   };
 
   getClusters = async () => {
     const response = await fetch(`/api/k8s/contexts`);
-    const data = await response.json();
+    const data = (await response.json()) as ClustersResponse[];
     return data;
   };
 
   getNamespaces = async () => {
-    const response = await fetch(`/api/k8s/namespaces/list`);
+    const response = await this.fetchWithDefaults(`/api/k8s/namespaces/list`);
     const data = await response.json();
     return data;
   };
 
   getRepositories = async () => {
-    const response = await fetch(`/api/helm/repositories`);
+    const response = await this.fetchWithDefaults(`/api/helm/repositories`);
     const data = await response.json();
     return data;
   };
@@ -46,7 +67,7 @@ class ApiService {
     queryKey,
   }: QueryFunctionContext<Chart[], Repository>) => {
     const [_, repository] = queryKey;
-    const response = await fetch(`/api/helm/repositories/${repository}`);
+    const response = await this.fetchWithDefaults(`/api/helm/repositories/${repository}`);
     const data = await response.json();
     return data;
   };
@@ -56,7 +77,7 @@ class ApiService {
   }: QueryFunctionContext<ChartVersion[], Chart>) => {
     const [_, chart] = queryKey;
 
-    const response = await fetch(
+    const response = await this.fetchWithDefaults(
       `/api/helm/repositories/versions?name=${chart.name}`
     );
     const data = await response.json();
@@ -65,14 +86,14 @@ class ApiService {
 
   getResourceStatus = async ({
     release,
-  }: { release: Release}) : Promise<ReleaseHealthStatus[] | null> => {
+  }: { release: Release }): Promise<ReleaseHealthStatus[] | null> => {
     if (!release) return null;
 
-    const response = await fetch(
+    const response = await this.fetchWithDefaults(
       `/api/helm/releases/${release.namespace}/${release.name}/resources?health=true`
     );
     const data = await response.json()
-    return data;  
+    return data;
   };
 
   getReleasesHistory = async ({
@@ -82,7 +103,7 @@ class ApiService {
 
     if (!params.namespace || !params.chart) return null;
 
-    const response = await fetch(
+    const response = await this.fetchWithDefaults(
       `/api/helm/releases/${params.namespace}/${params.chart}/history`
     );
     const data = await response.json();
@@ -98,7 +119,7 @@ class ApiService {
       return Promise.reject(new Error("missing parameters"));
 
     const url = `/api/helm/repositories/values?chart=${namespace}/${chart.name}&version=${version}`;
-    const response = await fetch(url);
+    const response = await this.fetchWithDefaults(url);
     const data = await response.text();
 
     return data;

diff --git a/dashboard/src/API/releases.ts b/dashboard/src/API/releases.ts
@@ -6,7 +6,8 @@ import {
 } from "@tanstack/react-query";
 import { ChartVersion, Release } from "../data/types";
 import { LatestChartVersion } from "./interfaces";
-
+import ApiService from "./apiService";
+import apiService from "./apiService";
 export const HD_RESOURCE_CONDITION_TYPE = "hdHealth"; // it's our custom condition type, only one exists
 
 export function useGetInstalledReleases(
@@ -350,7 +351,7 @@ export async function callApi<T>(
   url: string,
   options?: RequestInit
 ): Promise<T> {
-  const response = await fetch(url, options);
+  const response = await apiService.fetchWithDefaults(url, options);
 
   if (!response.ok) {
     const error = await response.text();

diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
@@ -1,14 +1,15 @@
 import Header from "./layout/Header";
-import { HashRouter, Route, Routes } from "react-router-dom";
+import { HashRouter, Outlet, Route, Routes, useLocation, useMatch, useParams } from "react-router-dom";
 import "./index.css";
 import Installed from "./pages/Installed";
 import RepositoryPage from "./pages/Repository";
 import Revision from "./pages/Revision";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useState } from "react";
+import { PropsWithChildren, useContext, useEffect, useState } from "react";
 import { ErrorAlert, ErrorModalContext } from "./context/ErrorModalContext";
 import GlobalErrorModal from "./components/modal/GlobalErrorModal";
-import { AppContextProvider } from "./context/AppContext";
+import { AppContextProvider, useAppContext } from "./context/AppContext";
+import apiService from "./API/apiService";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -18,19 +19,28 @@ const queryClient = new QueryClient({
   },
 });
 
-const PageLayout = ({ children }: { children: React.ReactNode }) => {
+const PageLayout = () => {
   return (
     <>
       <Header />
       <div className="bg-body-background min-h-screen min-w-screen">
         <div className="bg-no-repeat bg-[url('./assets/body-background.svg')] min-h-screen max-h-full">
-          {children}
+          <Outlet />
         </div>
       </div>
     </>
   );
 };
 
+const SyncContext: React.FC = () => {
+  const { context } = useParams();
+  if (context) {
+    apiService.setCluster(context);
+  }
+
+  return <Outlet />;
+}
+
 export default function App() {
   const [shouldShowErrorModal, setShowErrorModal] = useState<
     ErrorAlert | undefined
@@ -43,48 +53,46 @@ export default function App() {
         <ErrorModalContext.Provider value={value}>
           <QueryClientProvider client={queryClient}>
             <HashRouter>
-              <Routes>
-                <Route
-                  path="/installed/:context?"
-                  element={
-                    <PageLayout>
-                      <Installed />
-                    </PageLayout>
-                  }
-                />
-                <Route
-                  path="/installed/revision/:context/:namespace/:chart/:revision"
-                  element={
-                    <PageLayout>
-                      <Revision />
-                    </PageLayout>
-                  }
-                />
-                <Route
-                  path="/repository/:context"
-                  element={
-                    <PageLayout>
-                      <RepositoryPage />
-                    </PageLayout>
-                  }
-                />
-                <Route
-                  path="/repository/:context/:selectedRepo?"
-                  element={
-                    <PageLayout>
-                      <RepositoryPage />
-                    </PageLayout>
-                  }
-                />
-                <Route
-                  path="*"
-                  element={
-                    <PageLayout>
-                      <Installed />
-                    </PageLayout>
-                  }
-                />
-              </Routes>
+                <Routes>
+                  <Route path="*" element={<PageLayout />} >
+                    <Route path=":context/*" element={<SyncContext />} >
+                      <Route
+                        path="installed/?"
+                        element={<Installed />}
+                      />
+                      <Route
+                        path=":namespace/:chart/installed/revision/:revision"
+                        element={
+                          <Revision />
+                        }
+                      />
+                      <Route
+                        path="repository/"
+                        element={
+                          <RepositoryPage />
+                        }
+                      />
+                      <Route
+                        path="repository/:selectedRepo?"
+                        element={
+                          <RepositoryPage />
+                        }
+                      />
+                      <Route
+                        path="*"
+                        element={
+                          <Installed />
+                        }
+                      />
+                    </Route>
+                    <Route
+                      path="*"
+                      element={
+                        <Installed />
+                      }
+                    />
+                  </Route>
+                </Routes>
               <GlobalErrorModal
                 isOpen={!!shouldShowErrorModal}
                 onClose={() => setShowErrorModal(undefined)}

diff --git a/dashboard/src/components/InstalledPackages/InstalledPackageCard.tsx b/dashboard/src/components/InstalledPackages/InstalledPackageCard.tsx
@@ -25,6 +25,7 @@ export default function InstalledPackageCard({
 }: InstalledPackageCardProps) {
   const navigate = useNavigateWithSearchParams();
 
+  const { context: selectedCluster } = useParams();
   const [isMouseOver, setIsMouseOver] = useState(false);
 
   const { data: clusters } = useQuery<Cluster[]>({
@@ -64,16 +65,9 @@ export default function InstalledPackageCard({
 
   const handleOnClick = () => {
     const { name, namespace } = release;
-    const selectedCluster = clusters?.find((cluster) => cluster.IsCurrent);
-
-    if (!selectedCluster) {
-      throw new Error(
-        "Couldn't find selected cluster! cannot navigate to revision page"
-      );
-    }
 
     navigate(
-      `/installed/revision/${selectedCluster?.Name}/${namespace}/${name}/${release.revision}`,
+      `/${selectedCluster}/${namespace}/${name}/installed/revision/${release.revision}`,
       { state: release }
     );
   };
@@ -87,11 +81,9 @@ export default function InstalledPackageCard({
 
   return (
     <div
-      className={`${
-        borderLeftColor[release.status]
-      } text-xs grid grid-cols-12 items-center bg-white rounded-md p-2 py-6 my-4 drop-shadow border-l-4 border-l-[${statusColor}] cursor-pointer ${
-        isMouseOver && "drop-shadow-lg"
-      }`}
+      className={`${borderLeftColor[release.status]
+        } text-xs grid grid-cols-12 items-center bg-white rounded-md p-2 py-6 my-4 drop-shadow border-l-4 border-l-[${statusColor}] cursor-pointer ${isMouseOver && "drop-shadow-lg"
+        }`}
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
       onClick={handleOnClick}

diff --git a/dashboard/src/components/modal/AddRepositoryModal.tsx b/dashboard/src/components/modal/AddRepositoryModal.tsx
@@ -55,7 +55,7 @@ function AddRepositoryModal({ isOpen, onClose }: AddRepositoryModalProps) {
 
         queryClient.invalidateQueries({ queryKey: ["helm", "repositories"] });
         setSelectedRepo(formData.name || "");
-        navigate(`/repository/${context}/${formData.name}`, { replace: true });
+        navigate(`/${context}/repository/${formData.name}`, { replace: true });
       })
       .catch((error) => {
         alertError.setShowErrorModal({