Merge pull request #134 from kinvolk/show_errors_when_no_cluster_is_configured

Show errors when no cluster is configured

Author: joaquimrocha

backend/cmd/headlamp.go

@@ -91,7 +91,7 @@ func StartHeadlampServer(config *HeadlampConfig) {
 	if config.useInCluster {
 		context, err := GetOwnContext(config)
 		if err != nil {
-			log.Fatal("Failed to get in-cluster config", err)
+			log.Println("Failed to get in-cluster config", err)
 		}
 
 		contexts = append(contexts, *context)
@@ -103,7 +103,7 @@ func StartHeadlampServer(config *HeadlampConfig) {
 
 		contextsFound, err := GetContextsFromKubeConfigFile(kubeConfigPath)
 		if err != nil {
-			log.Fatal("Failed to get contexts from", kubeConfigPath, err)
+			log.Println("Failed to get contexts from", kubeConfigPath, err)
 		}
 
 		contexts = append(contexts, contextsFound...)

frontend/src/App.tsx

@@ -285,7 +285,7 @@ function AuthRoute(props: AuthRouteProps) {
     if (requiresCluster) {
       const clusterName = getCluster();
       if (!!clusterName) {
-        const cluster = clusters[clusterName];
+        const cluster = clusters ? clusters[clusterName] : undefined;
         const requiresToken = (cluster?.useToken === undefined || cluster?.useToken);
         if (!!getToken(clusterName) || !requiresToken) {
           return children;

frontend/src/components/account/Auth.tsx

@@ -46,7 +46,7 @@ function Auth() {
         disableBackdropClick
       >
         <DialogTitle id="responsive-dialog-title">
-          {Object.keys(clusterConf).length > 1 ? `Authentication: ${getCluster()}` : 'Authentication'}
+          {Object.keys(clusterConf || {}).length > 1 ? `Authentication: ${getCluster()}` : 'Authentication'}
         </DialogTitle>
         <DialogContent>
           <DialogContentText>
@@ -64,7 +64,7 @@ function Auth() {
           />
         </DialogContent>
         <DialogActions>
-          {Object.keys(clusters).length > 1 &&
+          {Object.keys(clusters || {}).length > 1 &&
           <>
             <Button onClick = {() => history.replace('/')} color="primary">
               Cancel

frontend/src/components/authchooser/index.tsx

@@ -42,7 +42,7 @@ function AuthChooser(){
   const clusterName = getCluster() as string;
 
   let clusterAuthType = '';
-  if (clusters[clusterName]) {
+  if (clusters && clusters[clusterName]) {
     clusterAuthType = clusters[clusterName].auth_type;
   }
 
@@ -64,7 +64,7 @@ function AuthChooser(){
 
   React.useEffect(() => {
     const clusterName = getCluster();
-    if (!clusterName || testingAuth || Object.keys(clusters).length === 0) {
+    if (!clusterName || testingAuth || !clusters || Object.keys(clusters).length === 0) {
       return;
     }
 
@@ -156,12 +156,14 @@ function AuthChooser(){
             <ColorButton onClick={handleTokenAuth}>Use A Token</ColorButton>
           </Box>
         </Box>
-        <Box m={2} display="flex" alignItems="center" style={{cursor: 'pointer'}} onClick={handleBackButtonPress}>
-          <Box pt={0.5}>
-            <InlineIcon icon={chevronLeft} height={20} width={20}/>
+        {!!clusters && Object.keys(clusters).length > 1 &&
+          <Box m={2} display="flex" alignItems="center" style={{cursor: 'pointer'}} onClick={handleBackButtonPress}>
+            <Box pt={0.5}>
+              <InlineIcon icon={chevronLeft} height={20} width={20}/>
+            </Box>
+            <Box fontSize={14}>BACK</Box>
           </Box>
-          <Box fontSize={14}>BACK</Box>
-        </Box>
+        }
       </Box>
       }
     </ClusterDialog>

frontend/src/components/cluster/Chooser.tsx

@@ -45,7 +45,7 @@ export function ClusterTitle() {
     return null;
   }
 
-  if (Object.keys(clusters).length <= 1) {
+  if (Object.keys(clusters || {}).length <= 1) {
     return null;
   }
 
@@ -230,7 +230,7 @@ function Chooser(props: ClusterDialogProps) {
 
     // If we only have one cluster configured, then we skip offering
     // the choice to the user.
-    if (Object.keys(clusters).length === 1) {
+    if (!!clusters && Object.keys(clusters).length === 1) {
       handleButtonClick(Object.values(clusters)[0]);
     }
   },
@@ -259,7 +259,7 @@ function Chooser(props: ClusterDialogProps) {
     }
   }
 
-  const clusterList = Object.values(clusters);
+  const clusterList = Object.values(clusters || {});
 
   return (
     <ClusterDialog
@@ -269,10 +269,23 @@ function Chooser(props: ClusterDialogProps) {
     >
       {clusterList.length === 0 ?
         <React.Fragment>
-          <DialogContentText>
-            Wait while fetching clusters…
-          </DialogContentText>
-          <Loader />
+          {clusters === null ?
+            <>
+              <DialogContentText>
+                Wait while fetching clusters…
+              </DialogContentText>
+              <Loader />
+            </>
+            :
+            <>
+              <DialogContentText>
+                There seems to be no clusters configured…
+              </DialogContentText>
+              <DialogContentText>
+                Please make sure you have at least one cluster configured.
+              </DialogContentText>
+            </>
+          }
         </React.Fragment>
         :
         <React.Fragment>

frontend/src/lib/k8s/index.ts

@@ -30,6 +30,8 @@ import ServiceAccount from './serviceAccount';
 import StatefulSet from './statefulSet';
 import StorageClass from './storageClass';
 
+const CLUSTER_FETCH_INTERVAL = 60 * 1000; // ms
+
 const classList = [
   ClusterRole,
   ClusterRoleBinding,
@@ -73,30 +75,48 @@ interface Config {
 }
 
 // Hook for getting or fetching the clusters configuration.
-export function useClustersConf() {
+export function useClustersConf(): ConfigState['clusters'] {
   const dispatch = useDispatch();
   const clusters = useTypedSelector(state => state.config.clusters);
+  const [retry, setRetry] = React.useState(!clusters || Object.keys(clusters).length === 0);
 
   React.useEffect(() => {
-    if (Object.keys(clusters).length === 0) {
+    let retryHandler = 0;
+
+    if (retry) {
+      setRetry(false);
+
       request('/config', {}, false, false)
         .then((config: Config) => {
-          const clusters: ConfigState['clusters'] = {};
+          const clustersToConfig: ConfigState['clusters'] = {};
           config?.clusters.forEach((cluster: Cluster) => {
-            clusters[cluster.name] = cluster;
+            clustersToConfig[cluster.name] = cluster;
           });
 
           const configToStore = {
             ...config,
-            clusters
+            clusters: clustersToConfig
           };
-          dispatch(setConfig(configToStore));
+
+          if (!clusters || Object.keys(clusters).length !== 0 ||
+              Object.keys(clustersToConfig).length !== 0) {
+            dispatch(setConfig(configToStore));
+          }
         })
-        .catch((err: Error) => console.error(err));
-      return;
+        .catch((err: Error) => {
+          console.error(err);
+          retryHandler = window.setInterval(() => setRetry(true), CLUSTER_FETCH_INTERVAL);
+        });
+
+      return function cleanup() {
+        if (retryHandler !== 0) {
+          window.clearInterval(retryHandler);
+          retryHandler = 0;
+        }
+      };
     }
   },
-  [clusters, dispatch]);
+  [clusters, dispatch, retry]);
 
   return clusters;
 }

frontend/src/redux/reducers/config.tsx

@@ -4,11 +4,11 @@ import { Action, CONFIG_NEW } from '../actions/actions';
 export interface ConfigState {
   clusters: {
     [clusterName: string]: Cluster;
-  };
+  } | null;
 }
 
 export const INITIAL_STATE: ConfigState = {
-  clusters: {},
+  clusters: null,
 };
 
 function reducer(state = INITIAL_STATE, action: Action) {