-
-
Notifications
You must be signed in to change notification settings - Fork 122
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #46 from kubenav/azure-support
Add Support for Microsoft Azure
- Loading branch information
Showing
18 changed files
with
401 additions
and
31 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.