refactor(kube/namespaces): migrate item apps table to react [EE-4693] (#11012)

app/kubernetes/components/datatables/resource-pool-applications-datatable/resourcePoolApplicationsDatatable.html

@@ -1,153 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle vertical-center">
-          <div class="widget-icon space-right">
-            <pr-icon icon="$ctrl.titleIcon"></pr-icon>
-          </div>
-          {{ $ctrl.titleText }}
-        </div>
-        <div class="searchBar vertical-center">
-          <pr-icon icon="'search'" class="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 ng-if="$ctrl.refreshCallback" class="settings">
-          <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="'StackName'"
-                  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="'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'"
-                  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'"
-                  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-primary image-tag" ng-if="$ctrl.isExternalApplication(item)">external</span>
-              </td>
-              <td>{{ item.StackName || '-' }}</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="5" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-muted text-center">No application 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">
-            <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/resource-pool-applications-datatable/resourcePoolApplicationsDatatable.js

@@ -1,13 +0,0 @@
-angular.module('portainer.kubernetes').component('kubernetesResourcePoolApplicationsDatatable', {
-  templateUrl: './resourcePoolApplicationsDatatable.html',
-  controller: 'KubernetesResourcePoolApplicationsDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-    refreshCallback: '<',
-  },
-});

app/kubernetes/components/datatables/resource-pool-applications-datatable/resourcePoolApplicationsDatatableController.js

@@ -1,47 +0,0 @@
-import KubernetesApplicationHelper from 'Kubernetes/helpers/application';
-
-angular.module('portainer.docker').controller('KubernetesResourcePoolApplicationsDatatableController', [
-  '$scope',
-  '$controller',
-  'DatatableService',
-  function ($scope, $controller, DatatableService) {
-    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
-
-    this.isExternalApplication = function (item) {
-      return KubernetesApplicationHelper.isExternalApplication(item);
-    };
-
-    this.$onInit = function () {
-      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/filters/applicationFilters.js

@@ -1,13 +1,11 @@
-import _ from 'lodash-es';
+import { cpuHumanValue } from '@/react/kubernetes/applications/utils/cpuHumanValue';
 import { nodeAffinityValues } from './application';
 
 angular
   .module('portainer.kubernetes')
   .filter('kubernetesApplicationCPUValue', function () {
     'use strict';
-    return function (value) {
+    return cpuHumanValue;
-      return _.round(value, 2);
-    };
   })
   .filter('kubernetesApplicationDataAccessPolicyIcon', function () {
     'use strict';

app/kubernetes/react/components/namespaces.ts

@@ -3,11 +3,11 @@ import angular from 'angular';
 import { r2a } from '@/react-tools/react2angular';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 import { NamespacesDatatable } from '@/react/kubernetes/namespaces/ListView/NamespacesDatatable';
+import { NamespaceAppsDatatable } from '@/react/kubernetes/namespaces/ItemView/NamespaceAppsDatatable';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 
 export const namespacesModule = angular
   .module('portainer.kubernetes.react.components.namespaces', [])
-
   .component(
     'kubernetesNamespacesDatatable',
     r2a(withUIRouter(withCurrentUser(NamespacesDatatable)), [
@@ -15,4 +15,12 @@ export const namespacesModule = angular
       'onRemove',
       'onRefresh',
     ])
+  )
+  .component(
+    'kubernetesNamespaceApplicationsDatatable',
+    r2a(withUIRouter(withCurrentUser(NamespaceAppsDatatable)), [
+      'dataset',
+      'isLoading',
+      'onRefresh',
+    ])
   ).name;

app/kubernetes/views/resource-pools/edit/resourcePool.html

@@ -309,18 +309,8 @@
     </div>
   </div>
 
-  <div class="row" ng-if="ctrl.applications && ctrl.applications.length > 0">
+  <div ng-if="ctrl.applications && ctrl.applications.length > 0">
-    <div class="col-sm-12">
+    <kubernetes-namespace-applications-datatable dataset="ctrl.applications" on-refresh="(ctrl.getApplications)" is-loading="ctrl.state.applicationsLoading">
-      <kubernetes-resource-pool-applications-datatable
+    </kubernetes-namespace-applications-datatable>
-        dataset="ctrl.applications"
-        table-key="kubernetes.resourcepool.applications"
-        order-by="Name"
-        refresh-callback="ctrl.getApplications"
-        loading="ctrl.state.applicationsLoading"
-        title-text="Applications running in this namespace"
-        title-icon="code"
-      >
-      </kubernetes-resource-pool-applications-datatable>
-    </div>
   </div>
 </div>

app/react/kubernetes/applications/utils/cpuHumanValue.ts

@@ -0,0 +1,5 @@
+import _ from 'lodash';
+
+export function cpuHumanValue(value: number) {
+  return _.round(value, 2);
+}

app/react/kubernetes/namespaces/ItemView/NamespaceAppsDatatable.tsx

@@ -0,0 +1,55 @@
+import { Code } from 'lucide-react';
+
+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 { NamespaceApp } from './types';
+import { columns } from './columns';
+
+interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
+
+export function NamespaceAppsDatatable({
+  dataset,
+  onRefresh,
+  isLoading,
+}: {
+  dataset: Array<NamespaceApp>;
+  onRefresh: () => void;
+  isLoading: boolean;
+}) {
+  const tableState = useTableStateWithStorage<TableSettings>(
+    'kube-namespace-apps',
+    'Name',
+    (set) => ({
+      ...refreshableSettings(set),
+    })
+  );
+  useRepeater(tableState.autoRefreshRate, onRefresh);
+
+  return (
+    <Datatable
+      dataset={dataset}
+      settingsManager={tableState}
+      columns={columns}
+      disableSelect
+      title="Applications running in this namespace"
+      titleIcon={Code}
+      isLoading={isLoading}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <TableSettingsMenuAutoRefresh
+            value={tableState.autoRefreshRate}
+            onChange={tableState.setAutoRefreshRate}
+          />
+        </TableSettingsMenu>
+      )}
+    />
+  );
+}

app/react/kubernetes/namespaces/ItemView/columns.tsx

@@ -0,0 +1,55 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { humanize, truncate } from '@/portainer/filters/filters';
+
+import { Link } from '@@/Link';
+import { ExternalBadge } from '@@/Badge/ExternalBadge';
+
+import { isExternalApplication } from '../../applications/utils';
+import { cpuHumanValue } from '../../applications/utils/cpuHumanValue';
+
+import { NamespaceApp } from './types';
+
+const columnHelper = createColumnHelper<NamespaceApp>();
+
+export const columns = [
+  columnHelper.accessor('Name', {
+    header: 'Name',
+    cell: ({ row: { original: item } }) => (
+      <>
+        <Link
+          to="kubernetes.applications.application"
+          params={{ name: item.Name, namespace: item.ResourcePool }}
+        >
+          {item.Name}
+        </Link>
+        {isExternalApplication({ metadata: item.Metadata }) && (
+          <div className="ml-2">
+            <ExternalBadge />
+          </div>
+        )}
+      </>
+    ),
+  }),
+  columnHelper.accessor('StackName', {
+    header: 'Stack',
+    cell: ({ getValue }) => getValue() || '-',
+  }),
+  columnHelper.accessor('Image', {
+    header: 'Image',
+    cell: ({ row: { original: item } }) => (
+      <>
+        {truncate(item.Image, 64)}
+        {item.Containers?.length > 1 && <>+ {item.Containers.length - 1}</>}
+      </>
+    ),
+  }),
+  columnHelper.accessor('CPU', {
+    header: 'CPU',
+    cell: ({ getValue }) => cpuHumanValue(getValue()),
+  }),
+  columnHelper.accessor('Memory', {
+    header: 'Memory',
+    cell: ({ getValue }) => humanize(getValue()),
+  }),
+];

app/react/kubernetes/namespaces/ItemView/types.ts

@@ -0,0 +1,6 @@
+import { KubernetesApplication } from '@/kubernetes/models/application/models';
+
+export interface NamespaceApp extends KubernetesApplication {
+  CPU: number;
+  Memory: number;
+}