app: home: Add delete button for clusters

Signed-off-by: Vincent T <[email protected]>

Author: vyncent-t

backend/cmd/headlamp.go

@@ -1384,6 +1384,22 @@ func (c *HeadlampConfig) deleteCluster(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	removeKubeConfig := r.URL.Query().Get("removeKubeConfig") == "true"
+	// removeKubeConfig := true 
+
+
+	if removeKubeConfig {  
+		// delete context from actual deafult kubecofig file  
+		// to do : replace the hard coding of this line with an actual path
+		err = kubeconfig.RemoveContextFromFile(name, filepath.Join("/home/vynty/.kube/config"))  
+		if err != nil {   
+			logger.Log(logger.LevelError, map[string]string{"cluster": name},   
+			err, "my cool error")   
+			http.Error(w, "removing cluster from kubeconfig", http.StatusInternalServerError)      
+			return  
+			} 
+		}
+	
 	kubeConfigPersistenceFile, err := defaultKubeConfigPersistenceFile()
 	if err != nil {
 		logger.Log(logger.LevelError, map[string]string{"cluster": name},

frontend/src/components/App/Home/index.tsx

@@ -25,6 +25,24 @@ import { ConfirmDialog } from '../../common';
 import ResourceTable from '../../common/Resource/ResourceTable';
 import RecentClusters from './RecentClusters';
 
+/**
+ * Gets the origin of a cluster.
+ *
+ * @param cluster
+ * @returns A description of where the cluster is picked up from: dynamic, in-cluster, or from a kubeconfig file.
+ */
+function getOrigin(cluster: Cluster): string {
+  if (cluster.meta_data?.source === 'kubeconfig') {
+    const kubeconfigPath = process.env.KUBECONFIG ?? '~/.kube/config';
+    return `Kubeconfig: ${kubeconfigPath}`;
+  } else if (cluster.meta_data?.source === 'dynamic_cluster') {
+    return t('translation|Plugin');
+  } else if (cluster.meta_data?.source === 'in_cluster') {
+    return t('translation|In-cluster');
+  }
+  return 'Unknown';
+}
+
 function ContextMenu({ cluster }: { cluster: Cluster }) {
   const { t } = useTranslation(['translation']);
   const history = useHistory();
@@ -33,8 +51,8 @@ function ContextMenu({ cluster }: { cluster: Cluster }) {
   const menuId = useId('context-menu');
   const [openConfirmDialog, setOpenConfirmDialog] = React.useState(false);
 
-  function removeCluster(cluster: Cluster) {
-    deleteCluster(cluster.name || '')
+  function removeCluster(cluster: Cluster, removeKubeconfig?: boolean) {
+    deleteCluster(cluster.name || '', removeKubeconfig)
       .then(config => {
         dispatch(setConfig(config));
       })
@@ -92,7 +110,8 @@ function ContextMenu({ cluster }: { cluster: Cluster }) {
         >
           <ListItemText>{t('translation|Settings')}</ListItemText>
         </MenuItem>
-        {helpers.isElectron() && cluster.meta_data?.source === 'dynamic_cluster' && (
+
+        {helpers.isElectron() && (
           <MenuItem
             onClick={() => {
               setOpenConfirmDialog(true);
@@ -109,13 +128,18 @@ function ContextMenu({ cluster }: { cluster: Cluster }) {
         handleClose={() => setOpenConfirmDialog(false)}
         onConfirm={() => {
           setOpenConfirmDialog(false);
-          removeCluster(cluster);
+          if (cluster.meta_data?.source !== 'dynamic_cluster') {
+            removeCluster(cluster, true);
+          } else {
+            removeCluster(cluster);
+          }
         }}
         title={t('translation|Delete Cluster')}
         description={t(
-          'translation|Are you sure you want to remove the cluster "{{ clusterName }}"?',
+          'translation|This action will delete cluster "{{ clusterName }}" from {{ source }}.',
           {
             clusterName: cluster.name,
+            source: getOrigin(cluster),
           }
         )}
       />
@@ -239,24 +263,6 @@ function HomeComponent(props: HomeComponentProps) {
       .sort();
   }
 
-  /**
-   * Gets the origin of a cluster.
-   *
-   * @param cluster
-   * @returns A description of where the cluster is picked up from: dynamic, in-cluster, or from a kubeconfig file.
-   */
-  function getOrigin(cluster: Cluster): string {
-    if (cluster.meta_data?.source === 'kubeconfig') {
-      const kubeconfigPath = process.env.KUBECONFIG ?? '~/.kube/config';
-      return `Kubeconfig: ${kubeconfigPath}`;
-    } else if (cluster.meta_data?.source === 'dynamic_cluster') {
-      return t('translation|Plugin');
-    } else if (cluster.meta_data?.source === 'in_cluster') {
-      return t('translation|In-cluster');
-    }
-    return 'Unknown';
-  }
-
   const memoizedComponent = React.useMemo(
     () => (
       <PageGrid>

frontend/src/components/common/ConfirmDialog.tsx

@@ -9,7 +9,7 @@ import { DialogTitle } from './Dialog';
 
 export interface ConfirmDialogProps extends MuiDialogProps {
   title: string;
-  description: string;
+  description: string | JSX.Element;
   onConfirm: () => void;
   handleClose: () => void;
 }

frontend/src/lib/k8s/api/v1/clusterApi.ts

@@ -78,7 +78,8 @@ export async function setCluster(clusterReq: ClusterRequest) {
 // @todo: needs documenting.
 
 export async function deleteCluster(
-  cluster: string
+  cluster: string,
+  removeKubeConfig?: boolean
 ): Promise<{ clusters: ConfigState['clusters'] }> {
   if (cluster) {
     const kubeconfig = await findKubeconfigByClusterName(cluster);
@@ -89,12 +90,10 @@ export async function deleteCluster(
     }
   }
 
-  return request(
-    `/cluster/${cluster}`,
-    { method: 'DELETE', headers: { ...getHeadlampAPIHeaders() } },
-    false,
-    false
-  );
+  const url = `/cluster/${cluster}?removeKubeConfig=${removeKubeConfig}`;
+
+  // need a way to add a param that passes 'removeKubeConfig' to go backend
+  return request(url, { method: 'DELETE', headers: { ...getHeadlampAPIHeaders() } }, false, false);
 }
 
 /**