Add Support for Microsoft Azure

package.json

@@ -46,7 +46,7 @@
     "@ionic/react": "^5.0.1",
     "@ionic/react-hooks": "0.0.6",
     "@ionic/react-router": "^5.0.1",
-    "@kubenav/kubenav-plugin": "1.4.0",
+    "@kubenav/kubenav-plugin": "1.5.1",
     "@kubernetes/client-node": "^0.11.1",
     "@types/jest": "^25.1.2",
     "@types/node": "^13.7.2",

src/App.tsx

@@ -25,6 +25,7 @@ import CustomResourcesListPage from './components/resources/cluster/customResour
 import DetailsPage from './components/resources/DetailsPage';
 import ListPage from './components/resources/ListPage';
 import ClustersAWSPage from './components/settings/clusters/aws/AWSPage';
+import ClustersAzurePage from './components/settings/clusters/azure/AzurePage';
 import ClustersGooglePage from './components/settings/clusters/google/GooglePage';
 import ClustersKubeconfigPage from './components/settings/clusters/kubeconfig/KubeconfigPage';
 import ClustersManualPage from './components/settings/clusters/manual/ManualPage';
@@ -50,6 +51,7 @@ const App: React.FunctionComponent = () => (
             <Route path="/customresources/:group/:version/:name" component={CustomResourcesListPage} exact={true} />
             <Route path="/settings/clusters" component={ClustersPage} exact={true} />
             <Route path="/settings/clusters/aws/:region" component={ClustersAWSPage} exact={true} />
+            <Route path="/settings/clusters/azure" component={ClustersAzurePage} exact={true} />
             <Route path="/settings/clusters/google" component={ClustersGooglePage} exact={true} />
             <Route path="/settings/clusters/kubeconfig" component={ClustersKubeconfigPage} exact={true} />
             <Route path="/settings/clusters/manual" component={ClustersManualPage} exact={true} />

src/components/settings/ClustersPage.tsx

@@ -27,6 +27,7 @@ const ClustersPage: React.FunctionComponent = () => {
           </IonButtons>
           <IonTitle>Clusters</IonTitle>
           {isPlatform('hybrid') ? <AddCluster /> : null}
+          <AddCluster />
         </IonToolbar>
       </IonHeader>
       <IonContent>

src/components/settings/clusters/AddCluster.tsx

@@ -12,6 +12,7 @@ import { add, close } from 'ionicons/icons';
 import React, { useState } from 'react';
 
 import AWS from './aws/AWS';
+import Azure from './azure/Azure';
 import Google from './google/Google';
 import Kubeconfig from './kubeconfig/Kubeconfig';
 import Manual from './manual/Manual';
@@ -35,6 +36,7 @@ const AddCluster: React.FunctionComponent = () => {
         <IonContent>
           <Google />
           <AWS />
+          <Azure />
           <Kubeconfig />
           <Manual />
         </IonContent>

src/components/settings/clusters/aws/AWS.tsx

@@ -48,7 +48,9 @@ const AWS: React.FunctionComponent = () => {
 
   return (
     <IonCard>
-      <img alt="GCP" src="/assets/card-header-aws.png" />
+      <div className="card-header-image">
+        <img alt="AWS" src="/assets/card-header-aws.png" />
+      </div>
       <IonCardHeader>
         <IonCardTitle>Import from Amazon Web Services</IonCardTitle>
       </IonCardHeader>

src/components/settings/clusters/azure/Azure.tsx

@@ -0,0 +1,111 @@
+import {
+  IonButton,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardTitle,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList, IonToggle,
+} from '@ionic/react';
+import React, { useState } from 'react';
+
+import { saveAzureCredentials } from '../../../../utils/storage';
+
+const Azure: React.FunctionComponent = () => {
+  const [subscriptionID, setSubscriptionID] = useState<string>('');
+  const [clientID, setClientID] = useState<string>('');
+  const [clientSecret, setClientSecret] = useState<string>('');
+  const [tenantID, setTenantID] = useState<string>('');
+  const [resourceGroupName, setResourceGroupName] = useState<string>('');
+  const [admin, setAdmin] = useState<boolean>(false);
+
+  const handleSubscriptionID = (event) => {
+    setSubscriptionID(event.target.value);
+  };
+
+  const handleClientID = (event) => {
+    setClientID(event.target.value);
+  };
+
+  const handleClientSecret = (event) => {
+    setClientSecret(event.target.value);
+  };
+
+  const handleTenantID = (event) => {
+    setTenantID(event.target.value);
+  };
+
+  const handleResourceGroupName = (event) => {
+    setResourceGroupName(event.target.value);
+  };
+
+  const toggleAdmin = (event) => {
+    setAdmin(event.detail.checked);
+  };
+
+  const importClusters = () => {
+    saveAzureCredentials({
+      subscriptionID: subscriptionID,
+      clientID: clientID,
+      clientSecret: clientSecret,
+      tenantID: tenantID,
+      resourceGroupName: resourceGroupName,
+      admin: admin,
+    });
+
+    window.location.replace(`/settings/clusters/azure`);
+  };
+
+  return (
+    <IonCard>
+      <div className="card-header-image">
+        <img alt="Azure" src="/assets/card-header-azure.png" />
+      </div>
+      <IonCardHeader>
+        <IonCardTitle>Import from Microsoft Azure</IonCardTitle>
+      </IonCardHeader>
+
+      <IonCardContent>
+        <p className="paragraph-margin-bottom">
+          Choose this option to import your AKS clusters from Microsoft Azure. You have to provide your Subscription ID,
+          Client ID, Tenant ID, Client Secret and the name of the Resource Group. These credentials are used to retrieve
+          the Kubeconfig files for your cluster. You can also choose between the user and admin configuration. For the
+          creation of the Azure credentials you can use the following guide: <a href="https://kubenav.io/help/microsoft-azure-creating-app-credentials.html" target="_blank" rel="noopener noreferrer">Microsoft Azure: Creating App Credentials</a>.
+        </p>
+
+        <IonList className="paragraph-margin-bottom" lines="full">
+          <IonItem>
+            <IonLabel position="stacked">Subscription ID</IonLabel>
+            <IonInput type="text" required={true} value={subscriptionID} onInput={handleSubscriptionID} />
+          </IonItem>
+          <IonItem>
+            <IonLabel position="stacked">Client ID</IonLabel>
+            <IonInput type="text" required={true} value={clientID} onInput={handleClientID} />
+          </IonItem>
+          <IonItem>
+            <IonLabel position="stacked">Client Secret</IonLabel>
+            <IonInput type="text" required={true} value={clientSecret} onInput={handleClientSecret} />
+          </IonItem>
+          <IonItem>
+            <IonLabel position="stacked">Tenant ID</IonLabel>
+            <IonInput type="text" required={true} value={tenantID} onInput={handleTenantID} />
+          </IonItem>
+          <IonItem>
+            <IonLabel position="stacked">Resource Group Name</IonLabel>
+            <IonInput type="text" required={true} value={resourceGroupName} onInput={handleResourceGroupName} />
+          </IonItem>
+          <IonItem>
+            <IonLabel>Admin Credentials</IonLabel>
+            <IonToggle checked={admin} onIonChange={toggleAdmin} />
+          </IonItem>
+        </IonList>
+
+        <IonButton expand="block" onClick={() => importClusters()}>Import from Azure</IonButton>
+      </IonCardContent>
+    </IonCard>
+  );
+};
+
+export default Azure;

src/components/settings/clusters/azure/AzurePage.tsx

@@ -0,0 +1,182 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCheckbox,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonMenuButton,
+  IonPage,
+  IonProgressBar,
+  IonTitle,
+  IonToolbar
+} from '@ionic/react';
+import React, { useContext, useEffect, useState } from 'react';
+import { RouteComponentProps } from 'react-router';
+
+import {
+  ICluster,
+  IContext,
+  IKubeconfigCluster,
+  IKubeconfigClusterRef, IKubeconfigUser,
+  IKubeconfigUserRef
+} from '../../../../declarations';
+import { getAzureClusters } from '../../../../utils/api';
+import { AppContext } from '../../../../utils/context';
+import { readAzureCredentials } from '../../../../utils/storage';
+import ErrorCard from '../../../misc/ErrorCard';
+
+const getKubeconfigCluster = (name: string, clusters: IKubeconfigClusterRef[]): IKubeconfigCluster|null => {
+  for (let cluster of clusters) {
+    if (cluster.name === name) {
+      return cluster.cluster
+    }
+  }
+
+  return null
+};
+
+const getKubeconfigUser = (name: string, users: IKubeconfigUserRef[]): IKubeconfigUser|null => {
+  for (let user of users) {
+    if (user.name === name) {
+      return user.user;
+    }
+  }
+
+  return null
+};
+
+const isChecked = (id: string, clusters: ICluster[]): boolean => {
+  for (let cluster of clusters) {
+    if (cluster.id === id) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+interface IAzurePageProps extends RouteComponentProps {}
+
+const AzurePage: React.FunctionComponent<IAzurePageProps> = ({ location, history }) => {
+  const context = useContext<IContext>(AppContext);
+
+  const [error, setError] = useState<string>('');
+  const [clusters, setClusters] = useState<ICluster[]>([]);
+  const [selectedClusters, setSelectedClusters] = useState<ICluster[]>([]);
+  const [showLoading, setShowLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    (async() => {
+      setShowLoading(true);
+
+      try {
+        const credentials = readAzureCredentials();
+        if (credentials) {
+          const aksClusters = await getAzureClusters(
+            credentials.subscriptionID,
+            credentials.clientID,
+            credentials.clientSecret,
+            credentials.tenantID,
+            credentials.resourceGroupName,
+            credentials.admin
+          );
+
+          const tmpClusters: ICluster[] = [];
+
+          // eslint-disable-next-line
+          aksClusters.map((cluster) => {
+            if (cluster.kubeconfig.contexts.length === 1) {
+              const kubeconfigCluster = getKubeconfigCluster(
+                cluster.kubeconfig.contexts[0].context.cluster,
+                cluster.kubeconfig.clusters,
+              );
+              const kubeconfigUser = getKubeconfigUser(
+                cluster.kubeconfig.contexts[0].context.user,
+                cluster.kubeconfig.users,
+              );
+
+              tmpClusters.push({
+                id: cluster.name,
+                name: cluster.name,
+                url: kubeconfigCluster ? kubeconfigCluster.server : '',
+                certificateAuthorityData: kubeconfigCluster ? kubeconfigCluster['certificate-authority-data'] : '',
+                clientCertificateData: kubeconfigUser && kubeconfigUser['client-certificate-data'] ? kubeconfigUser['client-certificate-data'] : '',
+                clientKeyData: kubeconfigUser && kubeconfigUser['client-key-data'] ? kubeconfigUser['client-key-data'] : '',
+                token: kubeconfigUser && kubeconfigUser.token ? kubeconfigUser.token : '',
+                username: kubeconfigUser && kubeconfigUser.username ? kubeconfigUser.username : '',
+                password: kubeconfigUser && kubeconfigUser.password ? kubeconfigUser.password : '',
+                authProvider: 'azure',
+                namespace: 'default',
+              });
+            }
+          });
+
+          setClusters(tmpClusters);
+        } else {
+          throw new Error('Could not credentials for Azure')
+        }
+      } catch (err) {
+        setError(err.message);
+      }
+
+      setShowLoading(false);
+    })();
+
+    return () => {};
+  }, [location]); /* eslint-disable-line */
+
+  const toggleSelectedCluster = (checked: boolean, cluster: ICluster) => {
+    if (checked) {
+      setSelectedClusters([...selectedClusters, cluster]);
+    } else {
+      setSelectedClusters(selectedClusters.filter((c) => c.id !== cluster.id));
+    }
+  };
+
+  const addClusters = () => {
+    context.addCluster(selectedClusters);
+    history.push('/settings/clusters');
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonMenuButton />
+          </IonButtons>
+          <IonTitle>Add Clusters</IonTitle>
+          {error ? null : (
+            <IonButtons slot="primary">
+              <IonButton onClick={() => addClusters()}>
+                Add
+              </IonButton>
+            </IonButtons>
+          )}
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        {showLoading ? <IonProgressBar slot="fixed" type="indeterminate" color="primary" /> : null}
+
+        {error ? <ErrorCard error={error} text="Could not load AKS clusters" icon="/assets/icons/kubernetes/kubernetes.png" /> : (
+          clusters.map((cluster, index) => {
+            return (
+              <IonItem key={index}>
+                <IonCheckbox
+                  slot="start"
+                  checked={isChecked(cluster.id, selectedClusters)}
+                  onIonChange={(e) => toggleSelectedCluster(e.detail.checked, cluster)}
+                />
+                <IonLabel>{cluster.name}</IonLabel>
+              </IonItem>
+            )
+          })
+        )}
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default AzurePage;

src/components/settings/clusters/google/Google.tsx

@@ -24,7 +24,9 @@ const Google: React.FunctionComponent = () => {
 
   return (
     <IonCard>
-      <img alt="GCP" src="/assets/card-header-gcp.png" />
+      <div className="card-header-image">
+        <img alt="GCP" src="/assets/card-header-gcp.png" />
+      </div>
       <IonCardHeader>
         <IonCardTitle>Import from Google Cloud Platform</IonCardTitle>
       </IonCardHeader>