refactor(docker/containers): migrate processes table to react [EE-4666] (#10081)

app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html

@@ -1,66 +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-name="'searchIcon'"></pr-icon>
-          <input
-            type="text"
-            class="searchInput"
-            ng-model="$ctrl.state.textFilter"
-            ng-change="$ctrl.onTextFilterChange()"
-            placeholder="Search for a process..."
-            auto-focus
-            ng-model-options="{ debounce: 300 }"
-            data-cy="process-searchInput"
-          />
-        </div>
-      </div>
-      <div class="table-responsive">
-        <table class="table-hover nowrap-cells table">
-          <thead>
-            <tr>
-              <th ng-repeat="header in $ctrl.headerset">
-                {{ header }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr dir-paginate="item in ($ctrl.state.filteredProcesses = ($ctrl.dataset | filter:$ctrl.state.textFilter | itemsPerPage: $ctrl.state.paginatedItemLimit))">
-              <td ng-repeat="info in item track by $index">{{ info }}</td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="{{ $ctrl.headerset.length }}" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredProcesses.length === 0">
-              <td colspan="{{ $ctrl.headerset.length }}" class="text-muted text-center">No process available.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <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/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.js

@@ -1,13 +0,0 @@
-angular.module('portainer.docker').component('containerProcessesDatatable', {
-  templateUrl: './containerProcessesDatatable.html',
-  controller: 'GenericDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '=',
-    headerset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-  },
-});

app/docker/react/components/index.ts

@@ -20,6 +20,7 @@ import { EventsDatatable } from '@/react/docker/events/EventsDatatables';
 import { ConfigsDatatable } from '@/react/docker/configs/ListView/ConfigsDatatable';
 import { AgentHostBrowser } from '@/react/docker/host/BrowseView/AgentHostBrowser';
 import { AgentVolumeBrowser } from '@/react/docker/volumes/BrowseView/AgentVolumeBrowser';
+import { ProcessesDatatable } from '@/react/docker/containers/StatsView/ProcessesDatatable';
 
 const ngModule = angular
   .module('portainer.docker.react.components', [])
@@ -120,6 +121,10 @@ const ngModule = angular
       'relativePath',
     ])
   )
-  .component('dockerEventsDatatable', r2a(EventsDatatable, ['dataset']));
+  .component('dockerEventsDatatable', r2a(EventsDatatable, ['dataset']))
+  .component(
+    'dockerContainerProcessesDatatable',
+    r2a(ProcessesDatatable, ['dataset', 'headers'])
+  );
 
 export const componentsModule = ngModule.name;

app/docker/views/containers/stats/containerstats.html

@@ -108,14 +108,4 @@
   </div>
 </div>
 
-<div class="row">
+<docker-container-processes-datatable dataset="processInfo.Processes" headers="processInfo.Titles"></docker-container-processes-datatable>
-  <div class="col-sm-12">
-    <container-processes-datatable
-      title-text="Processes"
-      title-icon="list"
-      dataset="processInfo.Processes"
-      headerset="processInfo.Titles"
-      table-key="container-processes"
-    ></container-processes-datatable>
-  </div>
-</div>

app/react/docker/containers/StatsView/ProcessesDatatable.tsx

@@ -0,0 +1,58 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { List } from 'lucide-react';
+import { useMemo } from 'react';
+
+import { Datatable } from '@@/datatables';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+
+const tableKey = 'container-processes';
+const store = createPersistedStore(tableKey);
+
+export function ProcessesDatatable({
+  dataset,
+  headers,
+}: {
+  dataset?: Array<Array<string | number>>;
+  headers?: Array<string>;
+}) {
+  const tableState = useTableState(store, tableKey);
+  const rows = useMemo(() => {
+    if (!dataset || !headers) {
+      return [];
+    }
+
+    return dataset.map((row, index) => ({
+      id: index,
+      ...Object.fromEntries(
+        headers.map((header, index) => [header, row[index]])
+      ),
+    }));
+  }, [dataset, headers]);
+
+  const columns = useMemo(
+    () =>
+      headers
+        ? headers.map(
+            (header) =>
+              ({ header, accessorKey: header } satisfies ColumnDef<{
+                [k: string]: string;
+              }>)
+          )
+        : [],
+    [headers]
+  );
+
+  return (
+    <Datatable
+      title="Processes"
+      titleIcon={List}
+      dataset={rows}
+      columns={columns}
+      settingsManager={tableState}
+      disableSelect
+      isLoading={!dataset}
+      emptyContentLabel="No processes found."
+    />
+  );
+}