refactor(home): migrate view to react [EE-1810] (#6314)

* refactor(http): parse axios errors (#6325)

* refactor(home): use endpoint-list as react component [EE-1814] (#6060)

* refactor(home): use endpoint-list as react component

fix(home): add missing features and refactors

- kubebutton
- group name
- poll when endpoint is off
- state management

refactor(endpoints): use stat component

fix(endpoints): add space between items

refactor(endpoints): move stats to components

refactor(endpoints): fetch time

refactor(home): move logic

refactor(home): move fe render logic

refactor(settings): use vanilla js for publicSettings

refactor(kube): remove angular from kube config service

feat(home): add kubeconfig button

feat(home): send analytics when opening kubeconfig modal

fix(home): memoize footer

refactor(home): use react-query for loading

fix(home): show correct control for kubeconfig modal

refactor(home): use debounce

refactor(home): use new components

refactor(home): replace endpoints with environments

refactor(home): move endpoint-list component to home

fix(home): show group name

refactor(home): use switch for environment icon

fix(kubeconfig): fix default case

refactor(axios): use parse axios error

refactor(home): use link components for navigate

fix(home): align azure icon

refactor(home): refactor stats

refactor(home): export envstatusbadge

refactor(home): remove unused bindings

* chore(home): write tests for edge indicator

* chore(home): basic stories for environment item

* style(settings): reformat

* fix(environments): add publicurl

* refactor(home): use table components

* refactor(datatables): merge useSearchBarState

* refactor(home): fetch group in env item

* chore(tests): basic tests

* chore(home): test when no envs

* refactor(tags): use axios for tagService

* refactor(env-groups): use axios for getGroups

* feat(app): ui-state context provider

* refactor(home): create MotdPanel

* refactor(app): create InformationPanel

* feat(endpoints): fetch number of total endpoints

* refactor(app): merge hooks

* refactor(home): migrate view to react [EE-1810]

fixes [EE-1810]

refactor(home): wip use react view

feat(home): show message if no endpoints

refactor(home): show endpoint list

refactor(home): don't use home to manage link

refactor(home): move state

refactor(home): check if edge using util

refactor(home): move inf panels

chore(home): tests

refactor(home): load groups and tags in env-item

refactor(settings): revert publicSettings change

refactor(home): move confirm snapshot method

* fix(home): show tags

* fix(environments): handle missing snapshots

* fix(kube/volumes): fetch pesistent volume claims

* refactor(kube): remove use of endpointProvider

* refactor(endpoints): set current endpoint

* chore(home): add data-cy for tests

* chore(tests): mock axios-progress-bar

* refactor(home): move use env list to env module

* feat(app): sync home view changes with ee

* fix(home): sort page header

* fix(app): fix tests

* chore(github): use yarn cache

* refactor(environments): load list of groups

* chore(babel): remove auto 18n keys extraction

* chore(environments): fix tests

* refactor(k8s/application): use current endpoint

* fix(app/header): add margin to header

* refactor(app): remove unused types

* refactor(app): use rq onError handler

* refactor(home): wrap element with button

app/kubernetes/components/datatables/resource-pools-datatable/resourcePoolsDatatable.js

@@ -2,6 +2,7 @@ angular.module('portainer.kubernetes').component('kubernetesResourcePoolsDatatab
   templateUrl: './resourcePoolsDatatable.html',
   controller: 'KubernetesResourcePoolsDatatableController',
   bindings: {
+    endpoint: '<',
     titleText: '@',
     titleIcon: '@',
     dataset: '<',
@@ -10,6 +11,5 @@ angular.module('portainer.kubernetes').component('kubernetesResourcePoolsDatatab
     reverseOrder: '<',
     removeAction: '<',
     refreshCallback: '<',
-    endpoint: '<',
   },
 });

app/kubernetes/components/helm/helm-templates/helm-add-repository/helm-add-repository.controller.js

@@ -1,11 +1,10 @@
 export default class HelmAddRepositoryController {
   /* @ngInject */
-  constructor($state, $async, HelmService, Notifications, EndpointProvider) {
+  constructor($state, $async, HelmService, Notifications) {
     this.$state = $state;
     this.$async = $async;
     this.HelmService = HelmService;
     this.Notifications = Notifications;
-    this.EndpointProvider = EndpointProvider;
   }
 
   doesRepoExist() {
@@ -19,7 +18,7 @@ export default class HelmAddRepositoryController {
   async addRepository() {
     this.state.isAddingRepo = true;
     try {
-      await this.HelmService.addHelmRepository(this.EndpointProvider.currentEndpoint().Id, { url: this.state.repository });
+      await this.HelmService.addHelmRepository(this.endpoint.Id, { url: this.state.repository });
       this.Notifications.success('Helm repository added successfully');
       this.$state.reload(this.$state.current);
     } catch (err) {

app/kubernetes/components/helm/helm-templates/helm-templates.html

@@ -146,7 +146,7 @@
 
 <div class="row">
   <div class="col-sm-12">
-    <helm-add-repository repos="$ctrl.state.repos"></helm-add-repository>
+    <helm-add-repository repos="$ctrl.state.repos" endpoint="$ctrl.endpoint"></helm-add-repository>
   </div>
 </div>
 

app/kubernetes/rest/kubeconfig.js

@@ -1,20 +0,0 @@
-import angular from 'angular';
-
-angular.module('portainer.kubernetes').factory('KubernetesConfig', KubernetesConfigFactory);
-
-/* @ngInject */
-function KubernetesConfigFactory($http, EndpointProvider, API_ENDPOINT_KUBERNETES) {
-  return { get };
-
-  async function get(environmentIDs) {
-    return $http({
-      method: 'GET',
-      url: `${API_ENDPOINT_KUBERNETES}/config`,
-      params: { ids: JSON.stringify(environmentIDs.map((x) => parseInt(x))) },
-      responseType: 'blob',
-      headers: {
-        Accept: 'text/yaml',
-      },
-    });
-  }
-}

app/kubernetes/services/kubeconfig.service.ts

@@ -0,0 +1,43 @@
+import { saveAs } from 'file-saver';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/portainer/environments/types';
+import { publicSettings } from '@/portainer/settings/settings.service';
+
+const baseUrl = 'kubernetes';
+
+export async function downloadKubeconfigFile(environmentIds: EnvironmentId[]) {
+  try {
+    const { headers, data } = await axios.get<Blob>(`${baseUrl}/config`, {
+      params: { ids: JSON.stringify(environmentIds) },
+      responseType: 'blob',
+      headers: {
+        Accept: 'text/yaml',
+      },
+    });
+    const contentDispositionHeader = headers['content-disposition'];
+    const filename = contentDispositionHeader.replace('attachment;', '').trim();
+    saveAs(data, filename);
+  } catch (e) {
+    throw parseAxiosError(e as Error, '');
+  }
+}
+
+export async function expiryMessage() {
+  const settings = await publicSettings();
+
+  const prefix = 'Kubeconfig file will';
+  switch (settings.KubeconfigExpiry) {
+    case '24h':
+      return `${prefix} expire in 1 day.`;
+    case '168h':
+      return `${prefix} expire in 7 days.`;
+    case '720h':
+      return `${prefix} expire in 30 days.`;
+    case '8640h':
+      return `${prefix} expire in 1 year.`;
+    case '0':
+    default:
+      return `${prefix} not expire.`;
+  }
+}

app/kubernetes/services/kubeconfigService.js

@@ -1,40 +0,0 @@
-import angular from 'angular';
-
-class KubernetesConfigService {
-  /* @ngInject */
-  constructor(KubernetesConfig, FileSaver, SettingsService) {
-    this.KubernetesConfig = KubernetesConfig;
-    this.FileSaver = FileSaver;
-    this.SettingsService = SettingsService;
-  }
-
-  async downloadKubeconfigFile(environmentIDs) {
-    const response = await this.KubernetesConfig.get(environmentIDs);
-    const headers = response.headers();
-    const contentDispositionHeader = headers['content-disposition'];
-    const filename = contentDispositionHeader.replace('attachment;', '').trim();
-    return this.FileSaver.saveAs(response.data, filename);
-  }
-
-  async expiryMessage() {
-    const settings = await this.SettingsService.publicSettings();
-    const expiryDays = settings.KubeconfigExpiry;
-    const prefix = 'Kubeconfig file will ';
-    switch (expiryDays) {
-      case '0':
-        return prefix + 'not expire.';
-      case '24h':
-        return prefix + 'expire in 1 day.';
-      case '168h':
-        return prefix + 'expire in 7 days.';
-      case '720h':
-        return prefix + 'expire in 30 days.';
-      case '8640h':
-        return prefix + 'expire in 1 year.';
-    }
-    return '';
-  }
-}
-
-export default KubernetesConfigService;
-angular.module('portainer.kubernetes').service('KubernetesConfigService', KubernetesConfigService);

app/kubernetes/services/persistentVolumeClaimService.js

@@ -6,9 +6,8 @@ import { KubernetesCommonParams } from 'Kubernetes/models/common/params';
 
 class KubernetesPersistentVolumeClaimService {
   /* @ngInject */
-  constructor($async, EndpointProvider, KubernetesPersistentVolumeClaims) {
+  constructor($async, KubernetesPersistentVolumeClaims) {
     this.$async = $async;
-    this.EndpointProvider = EndpointProvider;
     this.KubernetesPersistentVolumeClaims = KubernetesPersistentVolumeClaims;
 
     this.getAsync = this.getAsync.bind(this);
@@ -18,7 +17,7 @@ class KubernetesPersistentVolumeClaimService {
     this.deleteAsync = this.deleteAsync.bind(this);
   }
 
-  async getAsync(namespace, name) {
+  async getAsync(namespace, storageClasses, name) {
     try {
       const params = new KubernetesCommonParams();
       params.id = name;
@@ -26,28 +25,28 @@ class KubernetesPersistentVolumeClaimService {
         this.KubernetesPersistentVolumeClaims(namespace).get(params).$promise,
         this.KubernetesPersistentVolumeClaims(namespace).getYaml(params).$promise,
       ]);
-      const storageClasses = this.EndpointProvider.currentEndpoint().Kubernetes.Configuration.StorageClasses;
+
       return KubernetesPersistentVolumeClaimConverter.apiToPersistentVolumeClaim(raw, storageClasses, yaml);
     } catch (err) {
       throw new PortainerError('Unable to retrieve persistent volume claim', err);
     }
   }
 
-  async getAllAsync(namespace) {
+  async getAllAsync(namespace, storageClasses) {
     try {
       const data = await this.KubernetesPersistentVolumeClaims(namespace).get().$promise;
-      const storageClasses = this.EndpointProvider.currentEndpoint().Kubernetes.Configuration.StorageClasses;
+
       return _.map(data.items, (item) => KubernetesPersistentVolumeClaimConverter.apiToPersistentVolumeClaim(item, storageClasses));
     } catch (err) {
       throw new PortainerError('Unable to retrieve persistent volume claims', err);
     }
   }
 
-  get(namespace, name) {
+  get(namespace, storageClasses, name) {
     if (name) {
-      return this.$async(this.getAsync, namespace, name);
+      return this.$async(this.getAsync, namespace, storageClasses, name);
     }
-    return this.$async(this.getAllAsync, namespace);
+    return this.$async(this.getAllAsync, namespace, storageClasses);
   }
 
   /**

app/kubernetes/services/volumeService.js

@@ -19,28 +19,28 @@ class KubernetesVolumeService {
   /**
    * GET
    */
-  async getAsync(namespace, name) {
-    const [pvc, pool] = await Promise.all([this.KubernetesPersistentVolumeClaimService.get(namespace, name), this.KubernetesResourcePoolService.get(namespace)]);
+  async getAsync(namespace, storageClasses, name) {
+    const [pvc, pool] = await Promise.all([this.KubernetesPersistentVolumeClaimService.get(namespace, storageClasses, name), this.KubernetesResourcePoolService.get(namespace)]);
     return KubernetesVolumeConverter.pvcToVolume(pvc, pool);
   }
 
-  async getAllAsync(namespace) {
+  async getAllAsync(namespace, storageClasses) {
     const data = await this.KubernetesResourcePoolService.get(namespace);
     const pools = data instanceof Array ? data : [data];
     const res = await Promise.all(
       _.map(pools, async (pool) => {
-        const pvcs = await this.KubernetesPersistentVolumeClaimService.get(pool.Namespace.Name);
+        const pvcs = await this.KubernetesPersistentVolumeClaimService.get(pool.Namespace.Name, storageClasses);
         return _.map(pvcs, (pvc) => KubernetesVolumeConverter.pvcToVolume(pvc, pool));
       })
     );
     return _.flatten(res);
   }
 
-  get(namespace, name) {
+  get(namespace, storageClasses, name) {
     if (name) {
-      return this.$async(this.getAsync, namespace, name);
+      return this.$async(this.getAsync, namespace, storageClasses, name);
     }
-    return this.$async(this.getAllAsync, namespace);
+    return this.$async(this.getAllAsync, namespace, storageClasses);
   }
 
   /**

app/kubernetes/views/applications/create/createApplicationController.js

@@ -932,7 +932,8 @@ class KubernetesCreateApplicationController {
   refreshVolumes(namespace) {
     return this.$async(async () => {
       try {
-        const volumes = await this.KubernetesVolumeService.get(namespace);
+        const storageClasses = this.endpoint.Kubernetes.Configuration.StorageClasses;
+        const volumes = await this.KubernetesVolumeService.get(namespace, storageClasses);
         _.forEach(volumes, (volume) => {
           volume.Applications = KubernetesVolumeHelper.getUsingApplications(volume, this.applications);
         });
@@ -1045,9 +1046,11 @@ class KubernetesCreateApplicationController {
     return this.$async(async () => {
       try {
         const namespace = this.$state.params.namespace;
+        const storageClasses = this.endpoint.Kubernetes.Configuration.StorageClasses;
+
         [this.application, this.persistentVolumeClaims] = await Promise.all([
           this.KubernetesApplicationService.get(namespace, this.$state.params.name),
-          this.KubernetesPersistentVolumeClaimService.get(namespace),
+          this.KubernetesPersistentVolumeClaimService.get(namespace, storageClasses),
         ]);
       } catch (err) {
         this.Notifications.error('Failure', err, 'Unable to retrieve application details');

app/kubernetes/views/applications/edit/applicationController.js

@@ -348,12 +348,6 @@ class KubernetesApplicationController {
   }
 
   async onInit() {
-    const endpointId = this.LocalStorage.getEndpointID();
-    const endpoints = this.LocalStorage.getEndpoints();
-    const endpoint = _.find(endpoints, function (item) {
-      return item.Id === endpointId;
-    });
-
     this.state = {
       activeTab: 0,
       currentName: this.$state.$current.name,
@@ -372,7 +366,7 @@ class KubernetesApplicationController {
       expandedNote: false,
       useIngress: false,
       useServerMetrics: this.endpoint.Kubernetes.Configuration.UseServerMetrics,
-      publicUrl: endpoint.PublicURL,
+      publicUrl: this.endpoint.PublicURL,
     };
 
     this.state.activeTab = this.LocalStorage.getActiveTab('application');

app/kubernetes/views/dashboard/dashboardController.js

@@ -33,13 +33,14 @@ class KubernetesDashboardController {
 
   async getAllAsync() {
     const isAdmin = this.Authentication.isAdmin();
+    const storageClasses = this.endpoint.Kubernetes.Configuration.StorageClasses;
 
     try {
       const [pools, applications, configurations, volumes, tags] = await Promise.all([
         this.KubernetesResourcePoolService.get(),
         this.KubernetesApplicationService.get(),
         this.KubernetesConfigurationService.get(),
-        this.KubernetesVolumeService.get(),
+        this.KubernetesVolumeService.get(undefined, storageClasses),
         this.TagService.tags(),
       ]);
       this.applications = applications;

app/kubernetes/views/resource-pools/resourcePools.html

@@ -6,6 +6,7 @@
   <div class="row">
     <div class="col-sm-12">
       <kubernetes-resource-pools-datatable
+        endpoint="ctrl.endpoint"
         dataset="ctrl.resourcePools"
         table-key="kubernetes.resourcePools"
         order-by="Namespace.Name"

app/kubernetes/views/volumes/edit/volume.js

@@ -4,5 +4,6 @@ angular.module('portainer.kubernetes').component('kubernetesVolumeView', {
   controllerAs: 'ctrl',
   bindings: {
     $transition$: '<',
+    endpoint: '<',
   },
 });

app/kubernetes/views/volumes/edit/volumeController.js

@@ -116,9 +116,10 @@ class KubernetesVolumeController {
   }
 
   async getVolumeAsync() {
+    const storageClasses = this.endpoint.Kubernetes.Configuration.StorageClasses;
     try {
       const [volume, applications] = await Promise.all([
-        this.KubernetesVolumeService.get(this.state.namespace, this.state.name),
+        this.KubernetesVolumeService.get(this.state.namespace, storageClasses, this.state.name),
         this.KubernetesApplicationService.get(this.state.namespace),
       ]);
       volume.Applications = KubernetesVolumeHelper.getUsingApplications(volume, applications);

app/kubernetes/views/volumes/volumesController.js

@@ -71,9 +71,10 @@ class KubernetesVolumesController {
   }
 
   async getVolumesAsync() {
+    const storageClasses = this.endpoint.Kubernetes.Configuration.StorageClasses;
     try {
       const [volumes, applications, storages] = await Promise.all([
-        this.KubernetesVolumeService.get(),
+        this.KubernetesVolumeService.get(undefined, storageClasses),
         this.KubernetesApplicationService.get(),
         this.KubernetesStorageService.get(this.endpoint.Id),
       ]);