chore(helm): Convert helm details view to react (#476)

app/kubernetes/react/views/index.ts

@@ -23,6 +23,7 @@ import { NamespaceView } from '@/react/kubernetes/namespaces/ItemView/NamespaceV
 import { AccessView } from '@/react/kubernetes/namespaces/AccessView/AccessView';
 import { JobsView } from '@/react/kubernetes/more-resources/JobsView/JobsView';
 import { ClusterView } from '@/react/kubernetes/cluster/ClusterView';
+import { HelmApplicationView } from '@/react/kubernetes/helm/HelmApplicationView';
 
 export const viewsModule = angular
   .module('portainer.kubernetes.react.views', [])
@@ -79,6 +80,10 @@ export const viewsModule = angular
       []
     )
   )
+  .component(
+    'kubernetesHelmApplicationView',
+    r2a(withUIRouter(withReactQuery(withCurrentUser(HelmApplicationView))), [])
+  )
   .component(
     'kubernetesClusterView',
     r2a(withUIRouter(withReactQuery(withCurrentUser(ClusterView))), [])

app/kubernetes/views/applications/helm/helm.controller.js

@@ -1,52 +0,0 @@
-import PortainerError from 'Portainer/error';
-
-export default class KubernetesHelmApplicationController {
-  /* @ngInject */
-  constructor($async, $state, Authentication, Notifications, HelmService) {
-    this.$async = $async;
-    this.$state = $state;
-    this.Authentication = Authentication;
-    this.Notifications = Notifications;
-    this.HelmService = HelmService;
-  }
-
-  /**
-   * APPLICATION
-   */
-  async getHelmApplication() {
-    try {
-      this.state.dataLoading = true;
-      const releases = await this.HelmService.listReleases(this.endpoint.Id, { filter: `^${this.state.params.name}$`, namespace: this.state.params.namespace });
-      if (releases.length > 0) {
-        this.state.release = releases[0];
-      } else {
-        throw new PortainerError(`Release ${this.state.params.name} not found`);
-      }
-    } catch (err) {
-      this.Notifications.error('Failure', err, 'Unable to retrieve helm application details');
-    } finally {
-      this.state.dataLoading = false;
-    }
-  }
-
-  $onInit() {
-    return this.$async(async () => {
-      this.state = {
-        dataLoading: true,
-        viewReady: false,
-        params: {
-          name: this.$state.params.name,
-          namespace: this.$state.params.namespace,
-        },
-        release: {
-          name: undefined,
-          chart: undefined,
-          app_version: undefined,
-        },
-      };
-
-      await this.getHelmApplication();
-      this.state.viewReady = true;
-    });
-  }
-}

app/kubernetes/views/applications/helm/helm.css

@@ -1,5 +0,0 @@
-.release-table tr {
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: 1fr 4fr;
-}

app/kubernetes/views/applications/helm/helm.html

@@ -1,50 +0,0 @@
-<page-header
-  ng-if="$ctrl.state.viewReady"
-  title="'Helm details'"
-  breadcrumbs="[{label:'Applications', link:'kubernetes.applications'}, $ctrl.state.params.name]"
-  reload="true"
-></page-header>
-
-<kubernetes-view-loading view-ready="$ctrl.state.viewReady"></kubernetes-view-loading>
-
-<div ng-if="$ctrl.state.viewReady">
-  <div class="row">
-    <div class="col-sm-12">
-      <rd-widget>
-        <div class="toolBar vertical-center w-full flex-wrap !gap-x-5 !gap-y-1 p-5">
-          <div class="toolBarTitle vertical-center">
-            <div class="widget-icon space-right">
-              <pr-icon icon="'svg-helm'"></pr-icon>
-            </div>
-
-            Release
-          </div>
-        </div>
-        <rd-widget-body>
-          <table class="table">
-            <tbody class="release-table">
-              <tr>
-                <td class="vertical-center">Name</td>
-                <td class="vertical-center !p-2" data-cy="k8sAppDetail-appName">
-                  {{ $ctrl.state.release.name }}
-                </td>
-              </tr>
-              <tr>
-                <td class="vertical-center">Chart</td>
-                <td class="vertical-center !p-2">
-                  {{ $ctrl.state.release.chart }}
-                </td>
-              </tr>
-              <tr>
-                <td class="vertical-center">App version</td>
-                <td class="vertical-center !p-2">
-                  {{ $ctrl.state.release.app_version }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </rd-widget-body>
-      </rd-widget>
-    </div>
-  </div>
-</div>

app/kubernetes/views/applications/helm/index.js

@@ -1,11 +0,0 @@
-import angular from 'angular';
-import controller from './helm.controller';
-import './helm.css';
-
-angular.module('portainer.kubernetes').component('kubernetesHelmApplicationView', {
-  templateUrl: './helm.html',
-  controller,
-  bindings: {
-    endpoint: '<',
-  },
-});