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
+    ng-if="ctrl.applications && ctrl.applications.length > 0"
     dataset="ctrl.applications"
-        table-key="kubernetes.node.applications"
+    on-refresh="(ctrl.getApplications)"
-        order-by="Name"
+    is-loading="ctrl.state.applicationsLoading"
-        refresh-callback="ctrl.getApplications"
-        loading="ctrl.state.applicationsLoading"
-        title-text="Applications running on this node"
   >
   </kubernetes-node-applications-datatable>
-    </div>
-  </div>
 </div>

app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/NodeApplicationsDatatable.tsx

@@ -0,0 +1,56 @@
+import LaptopCode from '@/assets/ico/laptop-code.svg?c';
+
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { useRepeater } from '@@/datatables/useRepeater';
+import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
+import { useTableStateWithStorage } from '@@/datatables/useTableState';
+import {
+  BasicTableSettings,
+  refreshableSettings,
+  RefreshableTableSettings,
+} from '@@/datatables/types';
+
+import { useColumns } from './columns';
+import { NodeApplication } from './types';
+
+interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
+
+export function NodeApplicationsDatatable({
+  dataset,
+  onRefresh,
+  isLoading,
+}: {
+  dataset: Array<NodeApplication>;
+  onRefresh: () => void;
+  isLoading: boolean;
+}) {
+  const columns = useColumns(true);
+  const tableState = useTableStateWithStorage<TableSettings>(
+    'kube-node-apps',
+    'Name',
+    (set) => ({
+      ...refreshableSettings(set),
+    })
+  );
+  useRepeater(tableState.autoRefreshRate, onRefresh);
+
+  return (
+    <Datatable
+      dataset={dataset}
+      settingsManager={tableState}
+      columns={columns}
+      disableSelect
+      title="Applications running on this node"
+      titleIcon={LaptopCode}
+      isLoading={isLoading}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <TableSettingsMenuAutoRefresh
+            value={tableState.autoRefreshRate}
+            onChange={tableState.setAutoRefreshRate}
+          />
+        </TableSettingsMenu>
+      )}
+    />
+  );
+}

app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.helper.tsx

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { NodeApplication } from './types';
+
+export const helper = createColumnHelper<NodeApplication>();

app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.name.tsx

@@ -0,0 +1,38 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { isExternalApplication } from '@/react/kubernetes/applications/utils';
+import { useIsSystemNamespace } from '@/react/kubernetes/namespaces/queries/useIsSystemNamespace';
+import { ExternalBadge } from '@/react/kubernetes/components/ExternalBadge';
+import { SystemBadge } from '@/react/kubernetes/components/SystemBadge';
+
+import { Link } from '@@/Link';
+
+import { helper } from './columns.helper';
+import { NodeApplication } from './types';
+
+export const name = helper.accessor('Name', {
+  header: 'Name',
+  cell: Cell,
+});
+
+function Cell({
+  row: { original: item },
+}: CellContext<NodeApplication, string>) {
+  const isSystem = useIsSystemNamespace(item.ResourcePool);
+  return (
+    <div className="flex items-center gap-2">
+      <Link
+        to="kubernetes.applications.application"
+        params={{ name: item.Name, namespace: item.ResourcePool }}
+      >
+        {item.Name}
+      </Link>
+
+      {isSystem ? (
+        <SystemBadge />
+      ) : (
+        isExternalApplication({ metadata: item.Metadata }) && <ExternalBadge />
+      )}
+    </div>
+  );
+}

app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/columns.tsx

@@ -0,0 +1,57 @@
+import { useMemo } from 'react';
+import _ from 'lodash';
+
+import { humanize, truncate } from '@/portainer/filters/filters';
+
+import { Link } from '@@/Link';
+
+import { helper } from './columns.helper';
+import { name } from './columns.name';
+
+export function useColumns(areStacksVisible: boolean) {
+  return useMemo(
+    () =>
+      _.compact([
+        name,
+        areStacksVisible &&
+          helper.accessor('StackName', {
+            header: 'Stack',
+            cell: ({ getValue }) => getValue() || '-',
+          }),
+        helper.accessor((item) => item.ResourcePool, {
+          header: 'Namespace',
+          cell: ({ getValue }) => {
+            const namespace = getValue();
+            return (
+              <Link
+                to="kubernetes.resourcePools.resourcePool"
+                params={{ id: namespace }}
+              >
+                {namespace}
+              </Link>
+            );
+          },
+        }),
+        helper.accessor('Image', {
+          header: 'Image',
+          cell: ({ row: { original: item } }) => (
+            <>
+              {truncate(item.Image, 64)}
+              {item.Containers?.length > 1 && (
+                <>+ {item.Containers.length - 1}</>
+              )}
+            </>
+          ),
+        }),
+        helper.accessor('CPU', {
+          header: 'CPU reservation',
+          cell: ({ getValue }) => _.round(getValue(), 2),
+        }),
+        helper.accessor('Memory', {
+          header: 'Memory reservation',
+          cell: ({ getValue }) => humanize(getValue()),
+        }),
+      ]),
+    [areStacksVisible]
+  );
+}

app/react/kubernetes/cluster/NodeView/NodeApplicationsDatatable/types.ts

@@ -0,0 +1,6 @@
+import { KubernetesApplication } from '@/kubernetes/models/application/models';
+
+export type NodeApplication = KubernetesApplication & {
+  CPU: number;
+  Memory: number;
+};

app/react/kubernetes/components/ExternalBadge.tsx

@@ -0,0 +1,5 @@
+import { Badge } from '@@/Badge';
+
+export function ExternalBadge() {
+  return <Badge type="info">external</Badge>;
+}

app/react/kubernetes/components/SystemBadge.tsx

@@ -0,0 +1,5 @@
+import { Badge } from '@@/Badge';
+
+export function SystemBadge() {
+  return <Badge type="success">system</Badge>;
+}

app/react/kubernetes/namespaces/queries/useIsSystemNamespace.ts

@@ -0,0 +1,12 @@
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { useNamespaceQuery } from './useNamespaceQuery';
+
+export function useIsSystemNamespace(namespace: string) {
+  const envId = useEnvironmentId();
+  const query = useNamespaceQuery(envId, namespace, {
+    select: (namespace) => namespace.IsSystem,
+  });
+
+  return !!query.data;
+}

app/react/kubernetes/namespaces/queries/useNamespaceQuery.ts

@@ -6,9 +6,14 @@ import { EnvironmentId } from '@/react/portainer/environments/types';
 
 import { DefaultOrSystemNamespace } from '../types';
 
-export function useNamespaceQuery(
+export function useNamespaceQuery<T = DefaultOrSystemNamespace>(
   environmentId: EnvironmentId,
-  namespace: string
+  namespace: string,
+  {
+    select,
+  }: {
+    select?(namespace: DefaultOrSystemNamespace): T;
+  } = {}
 ) {
   return useQuery(
     ['environments', environmentId, 'kubernetes', 'namespaces', namespace],
@@ -17,6 +22,7 @@ export function useNamespaceQuery(
       onError: (err) => {
         notifyError('Failure', err as Error, 'Unable to get namespace.');
       },
+      select,
     }
   );
 }