refactor(kube/cluster): migrate node apps table to react [EE-4691] (#11016)

app/kubernetes/components/datatables/node-applications-datatable/nodeApplicationsDatatable.html

@@ -1,168 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle flex">
-          <div class="widget-icon space-right">
-            <pr-icon icon="'svg-laptopcode'"></pr-icon>
-          </div>
-          <span class="vertical-center">
-            {{ $ctrl.titleText }}
-          </span>
-        </div>
-        <div class="searchBar min-w-[260px]">
-          <pr-icon icon="'search'" class="vertical-center" class-name="'searchIcon'"></pr-icon>
-          <input
-            type="text"
-            class="searchInput"
-            ng-model="$ctrl.state.textFilter"
-            ng-change="$ctrl.onTextFilterChange()"
-            placeholder="Search for an application..."
-            auto-focus
-            ng-model-options="{ debounce: 300 }"
-          />
-        </div>
-        <div class="settings vertical-center">
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><pr-icon icon="'more-vertical'"></pr-icon></span>
-            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
-              <div class="tableMenu">
-                <div class="menuHeader"> Table settings </div>
-                <div class="menuContent">
-                  <div>
-                    <div class="md-checkbox">
-                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
-                      <label for="setting_auto_refresh">Auto refresh</label>
-                    </div>
-                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
-                      <label for="settings_refresh_rate"> Refresh rate </label>
-                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
-                        <option value="10">10s</option>
-                        <option value="30">30s</option>
-                        <option value="60">1min</option>
-                        <option value="120">2min</option>
-                        <option value="300">5min</option>
-                      </select>
-                      <span>
-                        <pr-icon id="refreshRateChange" style="display: none" icon="'check'" mode="'success'"></pr-icon>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
-                </div>
-              </div>
-            </div>
-          </span>
-        </div>
-      </div>
-      <div class="table-responsive">
-        <table class="table-hover nowrap-cells table">
-          <thead>
-            <tr>
-              <th>
-                <table-column-header
-                  col-title="'Name'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Name'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Name')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Stack'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'StackName'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('StackName')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Namespace'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Namespace'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Namespace' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Namespace')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Image'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Image'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Image')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'CPU reservation'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'CPU'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'CPU' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('CPU')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Memory reservation'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Memory'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Memory')"
-                ></table-column-header>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-            >
-              <td>
-                <a ui-sref="kubernetes.applications.application({ name: item.Name, namespace: item.ResourcePool })">{{ item.Name }}</a>
-                <span style="margin-left: 5px" class="label label-info image-tag" ng-if="$ctrl.isSystemNamespace(item)">system</span>
-                <span style="margin-left: 5px" class="label label-primary image-tag" ng-if="!$ctrl.isSystemNamespace(item) && $ctrl.isExternalApplication(item)">external</span>
-              </td>
-              <td>{{ item.StackName || '-' }}</td>
-              <td>
-                <a ui-sref="kubernetes.resourcePools.resourcePool({ id: item.ResourcePool })">{{ item.ResourcePool }}</a>
-              </td>
-              <td title="{{ item.Image }}"
-                >{{ item.Image | truncate: 64 }} <span ng-if="item.Containers.length > 1">+ {{ item.Containers.length - 1 }}</span></td
-              >
-              <td>{{ item.CPU | kubernetesApplicationCPUValue }}</td>
-              <td>{{ item.Memory | humansize }}</td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="6" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="6" class="text-muted text-center">No stack available.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-        <div class="paginationControls">
-          <form class="form-inline vertical-center">
-            <span class="limitSelector">
-              <span style="margin-right: 5px"> Items per page </span>
-              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
-                <option value="0">All</option>
-                <option value="10">10</option>
-                <option value="25">25</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-              </select>
-            </span>
-            <dir-pagination-controls max-size="5"></dir-pagination-controls>
-          </form>
-        </div>
-      </div>
-    </rd-widget-body>
-  </rd-widget>
-</div>

app/kubernetes/components/datatables/node-applications-datatable/nodeApplicationsDatatable.js

@@ -1,12 +0,0 @@
-angular.module('portainer.kubernetes').component('kubernetesNodeApplicationsDatatable', {
-  templateUrl: './nodeApplicationsDatatable.html',
-  controller: 'KubernetesNodeApplicationsDatatableController',
-  bindings: {
-    titleText: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-    refreshCallback: '<',
-  },
-});

app/kubernetes/components/datatables/node-applications-datatable/nodeApplicationsDatatableController.js

@@ -1,54 +0,0 @@
-import { KubernetesApplicationDeploymentTypes } from 'Kubernetes/models/application/models/appConstants';
-import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
-import KubernetesNamespaceHelper from 'Kubernetes/helpers/namespaceHelper';
-
-angular.module('portainer.docker').controller('KubernetesNodeApplicationsDatatableController', [
-  '$scope',
-  '$controller',
-  'DatatableService',
-  function ($scope, $controller, DatatableService) {
-    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
-
-    this.isSystemNamespace = function (item) {
-      return KubernetesNamespaceHelper.isSystemNamespace(item.ResourcePool);
-    };
-
-    this.isExternalApplication = function (item) {
-      return KubernetesApplicationHelper.isExternalApplication(item);
-    };
-
-    this.$onInit = function () {
-      this.KubernetesApplicationDeploymentTypes = KubernetesApplicationDeploymentTypes;
-      this.setDefaults();
-      this.prepareTableFromDataset();
-
-      this.state.orderBy = this.orderBy;
-      var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
-      if (storedOrder !== null) {
-        this.state.reverseOrder = storedOrder.reverse;
-        this.state.orderBy = storedOrder.orderBy;
-      }
-
-      var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
-      if (textFilter !== null) {
-        this.state.textFilter = textFilter;
-        this.onTextFilterChange();
-      }
-
-      var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
-      if (storedFilters !== null) {
-        this.filters = storedFilters;
-      }
-      if (this.filters && this.filters.state) {
-        this.filters.state.open = false;
-      }
-
-      var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
-      if (storedSettings !== null) {
-        this.settings = storedSettings;
-        this.settings.open = false;
-      }
-      this.onSettingsRepeaterChange();
-    };
-  },
-]);

app/kubernetes/models/application/models/Application.ts

@@ -1,5 +1,10 @@
 import { ServiceType } from '@/react/kubernetes/applications/CreateView/application-services/types';
-import { AppType, DeploymentType } from '@/react/kubernetes/applications/types';
+import {
+  AppType,
+  DeploymentType,
+  AppDataAccessPolicy,
+  AppKind,
+} from '@/react/kubernetes/applications/types';
 
 import { ConfigurationVolume } from './ConfigurationVolume';
 import { PersistedFolder } from './PersistedFolder';
@@ -13,7 +18,7 @@ export class Application {
 
   StackId: string;
 
-  ApplicationKind: string;
+  ApplicationKind?: AppKind;
 
   ApplicationOwner: string;
 
@@ -63,7 +68,7 @@ export class Application {
 
   DeploymentType?: DeploymentType;
 
-  DataAccessPolicy: 'Unknown';
+  DataAccessPolicy?: AppDataAccessPolicy;
 
   ApplicationType?: AppType;
 
@@ -93,7 +98,6 @@ export class Application {
     this.Name = '';
     this.StackName = '';
     this.StackId = '';
-    this.ApplicationKind = '';
     this.ApplicationOwner = '';
     this.ApplicationName = '';
     this.ResourcePool = '';
@@ -112,7 +116,6 @@ export class Application {
     this.Env = [];
     this.PersistedFolders = [];
     this.ConfigurationVolumes = [];
-    this.DataAccessPolicy = 'Unknown';
     this.RunningPodsCount = 0;
     this.TotalPodsCount = 0;
     this.Yaml = '';

app/kubernetes/models/application/models/ConfigurationVolume.ts

@@ -1,9 +1,9 @@
 export class ConfigurationVolume {
-  fileMountPath: string = '';
+  fileMountPath = '';
 
-  rootMountPath: string = '';
+  rootMountPath = '';
 
-  configurationKey: string = '';
+  configurationKey = '';
 
-  configurationName: string = '';
+  configurationName = '';
 }

app/kubernetes/models/application/models/PersistedFolder.ts

@@ -1,7 +1,7 @@
 export class PersistedFolder {
-  MountPath: string = '';
+  MountPath = '';
 
-  persistentVolumeClaimName: string = '';
+  persistentVolumeClaimName = '';
 
-  HostPath: string = '';
+  HostPath = '';
 }

app/kubernetes/react/components/clusterManagement.ts

@@ -0,0 +1,17 @@
+import angular from 'angular';
+
+import { r2a } from '@/react-tools/react2angular';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { NodeApplicationsDatatable } from '@/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable';
+
+export const clusterManagementModule = angular
+  .module('portainer.kubernetes.react.components.clusterManagement', [])
+  .component(
+    'kubernetesNodeApplicationsDatatable',
+    r2a(withUIRouter(withCurrentUser(NodeApplicationsDatatable)), [
+      'dataset',
+      'isLoading',
+      'onRefresh',
+    ])
+  ).name;

app/kubernetes/react/components/index.ts

@@ -65,12 +65,14 @@ import { IntegratedAppsDatatable } from '@/react/kubernetes/components/Integrate
 import { applicationsModule } from './applications';
 import { volumesModule } from './volumes';
 import { namespacesModule } from './namespaces';
+import { clusterManagementModule } from './clusterManagement';
 
 export const ngModule = angular
   .module('portainer.kubernetes.react.components', [
     applicationsModule,
     volumesModule,
     namespacesModule,
+    clusterManagementModule,
   ])
   .component(
     'ingressClassDatatable',

app/kubernetes/views/cluster/node/node.html

@@ -256,17 +256,11 @@
     </div>
   </div>
 
-  <div class="row" ng-if="ctrl.applications && ctrl.applications.length > 0">
-    <div class="col-sm-12">
-      <kubernetes-node-applications-datatable
-        dataset="ctrl.applications"
-        table-key="kubernetes.node.applications"
-        order-by="Name"
-        refresh-callback="ctrl.getApplications"
-        loading="ctrl.state.applicationsLoading"
-        title-text="Applications running on this node"
-      >
-      </kubernetes-node-applications-datatable>
-    </div>
-  </div>
+  <kubernetes-node-applications-datatable
+    ng-if="ctrl.applications && ctrl.applications.length > 0"
+    dataset="ctrl.applications"
+    on-refresh="(ctrl.getApplications)"
+    is-loading="ctrl.state.applicationsLoading"
+  >
+  </kubernetes-node-applications-datatable>
 </div>