feat(kubeconfig): kubeconfig download functionality EE-1202 (#5386)

* backend migration/backport

* Feat(kubeconfig): kubeconfig download button frontend EE-1202 (#5385)

* kubeconfig download button frontend

* fix kubeconfig download button

* backend migration/backport

* moved ng-if up one level

Co-authored-by: zees-dev <dev.786zshan@gmail.com>

* resolved conflicts, updated code

* - kube-config -> kube-config-download-button
- fixed kubeconfig file name (bug)

Co-authored-by: Richard Wei <54336863+WaysonWei@users.noreply.github.com>

api/http/handler/endpointproxy/proxy_kubernetes.go

@@ -79,4 +79,4 @@ func (handler *Handler) proxyRequestsToKubernetesAPI(w http.ResponseWriter, r *h
 
 	http.StripPrefix(requestPrefix, proxy).ServeHTTP(w, r)
 	return nil
-}
+}

api/portainer.go

@@ -1214,8 +1214,8 @@ type (
 
 	// KubeClient represents a service used to query a Kubernetes environment
 	KubeClient interface {
-		GetServiceAccount(tokendata *TokenData) (*v1.ServiceAccount, error)
 		SetupUserServiceAccount(userID int, teamIDs []int, restrictDefaultNamespace bool) error
+		GetServiceAccount(tokendata *TokenData) (*v1.ServiceAccount, error)
 		GetServiceAccountBearerToken(userID int) (string, error)
 		CreateUserShellPod(ctx context.Context, serviceAccountName string) (*KubernetesShellPod, error)
 		StartExecProcess(token string, useAdminToken bool, namespace, podName, containerName string, command []string, stdin io.Reader, stdout io.Writer) error

app/kubernetes/components/kube-config-download-button/kube-config-download-button.controller.js

@@ -0,0 +1,15 @@
+export default class KubeConfigController {
+  /* @ngInject */
+  constructor($window, KubernetesConfigService) {
+    this.$window = $window;
+    this.KubernetesConfigService = KubernetesConfigService;
+  }
+
+  async downloadKubeconfig() {
+    await this.KubernetesConfigService.downloadConfig();
+  }
+
+  $onInit() {
+    this.state = { isHTTPS: this.$window.location.protocol === 'https:' };
+  }
+}

app/kubernetes/components/kube-config-download-button/kube-config-download-button.html

@@ -0,0 +1,11 @@
+<button
+  ng-if="$ctrl.state.isHTTPS"
+  type="button"
+  class="btn btn-xs btn-primary"
+  ng-click="$ctrl.downloadKubeconfig()"
+  analytics-on
+  analytics-category="kubernetes"
+  analytics-event="kubernetes-kubectl-kubeconfig"
+>
+  Kubeconfig <i class="fas fa-download space-right"></i>
+</button>

app/kubernetes/components/kube-config-download-button/kube-config-download-button.js

@@ -0,0 +1,7 @@
+import angular from 'angular';
+import controller from './kube-config-download-button.controller';
+
+angular.module('portainer.kubernetes').component('kubeConfigDownloadButton', {
+  templateUrl: './kube-config-download-button.html',
+  controller,
+});

app/kubernetes/components/kubectl-shell/kubectl-shell.controller.js

@@ -3,13 +3,12 @@ import * as fit from 'xterm/lib/addons/fit/fit';
 
 export default class KubectlShellController {
   /* @ngInject */
-  constructor(TerminalWindow, $window, $async, EndpointProvider, LocalStorage, KubernetesConfigService, Notifications) {
+  constructor(TerminalWindow, $window, $async, EndpointProvider, LocalStorage, Notifications) {
     this.$async = $async;
     this.$window = $window;
     this.TerminalWindow = TerminalWindow;
     this.EndpointProvider = EndpointProvider;
     this.LocalStorage = LocalStorage;
-    this.KubernetesConfigService = KubernetesConfigService;
     this.Notifications = Notifications;
   }
 
@@ -83,7 +82,7 @@ export default class KubectlShellController {
       endpointId: this.EndpointProvider.endpointID(),
     };
 
-    const wsProtocol = this.state.isHTTPS ? 'wss://' : 'ws://';
+    const wsProtocol = this.$window.location.protocol === 'https:' ? 'wss://' : 'ws://';
     const path = '/api/websocket/kubernetes-shell';
     const queryParams = Object.entries(params)
       .map(([k, v]) => `${k}=${v}`)
@@ -97,17 +96,12 @@ export default class KubectlShellController {
     this.configureSocketAndTerminal(this.state.shell.socket, this.state.shell.term);
   }
 
-  async downloadKubeconfig() {
-    await this.KubernetesConfigService.downloadConfig();
-  }
-
   $onInit() {
     return this.$async(async () => {
       this.state = {
         css: 'normal',
         checked: false,
         icon: 'fa-window-minimize',
-        isHTTPS: this.$window.location.protocol === 'https:',
         shell: {
           connected: false,
           socket: null,

app/kubernetes/components/kubectl-shell/kubectl-shell.html

@@ -1,14 +1,12 @@
 <button type="button" class="btn btn-xs btn-primary" ng-click="$ctrl.connectConsole()" ng-disabled="$ctrl.state.shell.connected" data-cy="k8sSidebar-shellButton">
-  <i class="fa fa-terminal" style="margin-right: 2px;"></i>
-  kubectl shell
+  <i class="fa fa-terminal space-right"></i> kubectl shell
 </button>
 
+<kube-config-download-button></kube-config-download-button>
+
 <div ng-if="$ctrl.state.checked" class="{{ $ctrl.state.css }}-kubectl-shell">
   <div class="shell-container">
     <div class="shell-item"><i class="fas fa-terminal" style="margin-right: 5px;"></i>kubectl shell</div>
-    <div ng-if="$ctrl.state.isHTTPS" class="shell-item-center">
-      <a href="" ng-click="$ctrl.downloadKubeconfig()"><i class="fas fa-file-download" style="margin-right: 5px;"></i>Download Kubeconfig</a>
-    </div>
     <div class="shell-item-right">
       <i class="fas fa-redo-alt" ng-click="$ctrl.screenClear();" data-cy="k8sShell-refreshButton"></i>
       <i

app/kubernetes/services/kubeconfigService.js

@@ -9,7 +9,6 @@ class KubernetesConfigService {
 
   async downloadConfig() {
     const response = await this.KubernetesConfig.get();
-
     const headers = response.headers();
     const contentDispositionHeader = headers['content-disposition'];
     const filename = contentDispositionHeader.replace('attachment;', '').trim();