refactor(docker/events): convert table to react [EE-4667] (#8937)

app/docker/components/datatables/events-datatable/eventsDatatable.html

@@ -1,95 +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 an event..."
-            auto-focus
-            ng-model-options="{ debounce: 300 }"
-            data-cy="event-searchInput"
-          />
-        </div>
-      </div>
-      <div class="table-responsive">
-        <table class="table-hover nowrap-cells table">
-          <thead>
-            <tr>
-              <th>
-                <table-column-header
-                  col-title="'Date'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Time'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Time' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Time')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Category'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Type'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Type')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Details'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Details'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Details' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Details')"
-                ></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))"
-              ng-class="{ active: item.Checked }"
-            >
-              <td>{{ item.Time | getisodatefromtimestamp }}</td>
-              <td>{{ item.Type }}</td>
-              <td>{{ item.Details }}</td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="3" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="3" class="text-muted text-center">No event 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/events-datatable/eventsDatatable.js

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

app/docker/react/components/index.ts

@@ -17,8 +17,9 @@ import { GpusInsights } from '@/react/docker/host/SetupView/GpusInsights';
 import { InsightsBox } from '@/react/components/InsightsBox';
 import { BetaAlert } from '@/react/portainer/environments/update-schedules/common/BetaAlert';
 import { ImagesDatatable } from '@/react/docker/images/ListView/ImagesDatatable/ImagesDatatable';
+import { EventsDatatable } from '@/react/docker/events/EventsDatatables';
 
-export const componentsModule = angular
+const ngModule = angular
   .module('portainer.docker.react.components', [])
   .component('dockerfileDetails', r2a(DockerfileDetails, ['image']))
   .component('dockerHealthStatus', r2a(HealthStatus, ['health']))
@@ -80,4 +81,7 @@ export const componentsModule = angular
       'onRefresh',
       'onRemove',
     ])
-  ).name;
+  )
+  .component('dockerEventsDatatable', r2a(EventsDatatable, ['dataset']));
+
+export const componentsModule = ngModule.name;

app/docker/views/events/events.html

@@ -1,7 +1,3 @@
 <page-header title="'Event list'" breadcrumbs="['Events']" reload="true"> </page-header>
 
-<div class="row">
-  <div class="col-sm-12">
-    <events-datatable title-text="Events" title-icon="clock" dataset="events" table-key="events" order-by="Time" reverse-order="true"></events-datatable>
-  </div>
-</div>
+<docker-events-datatable dataset="events"></docker-events-datatable>

app/react/docker/events/EventsDatatables.tsx

@@ -0,0 +1,54 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { Clock } from 'lucide-react';
+
+import { isoDateFromTimestamp } from '@/portainer/filters/filters';
+
+import { Datatable } from '@@/datatables';
+import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
+
+type DockerEvent = {
+  Time: number;
+  Type: string;
+  Details: string;
+};
+
+const columnHelper = createColumnHelper<DockerEvent>();
+
+export const columns = [
+  columnHelper.accessor('Time', {
+    header: 'Date',
+    cell: ({ getValue }) => {
+      const value = getValue();
+      return isoDateFromTimestamp(value);
+    },
+  }),
+  columnHelper.accessor('Type', {
+    header: 'Type',
+  }),
+  columnHelper.accessor('Details', {
+    header: 'Details',
+  }),
+];
+
+const tableKey = 'docker-events';
+const settingsStore = createPersistedStore(tableKey, {
+  id: 'Time',
+  desc: true,
+});
+
+export function EventsDatatable({ dataset }: { dataset: Array<DockerEvent> }) {
+  const tableState = useTableState(settingsStore, tableKey);
+
+  return (
+    <Datatable
+      dataset={dataset}
+      columns={columns}
+      settingsManager={tableState}
+      title="Events"
+      titleIcon={Clock}
+      disableSelect
+      emptyContentLabel="No event available."
+    />
+  );
+}