refactor(edge/jobs): migrate results table to react [EE-4679] (#10663)

app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.css

@@ -1,3 +0,0 @@
-.edge-job-results-datatable thead th {
-  width: 50%;
-}

app/edge/components/edge-job-results-datatable/edgeJobResultsDatatable.html

@@ -1,70 +0,0 @@
-<div class="datatable edge-job-results-datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle vertical-center">
-          <span><pr-icon icon="$ctrl.titleIcon"></pr-icon></span>
-          {{ $ctrl.titleText }}
-        </div>
-        <div class="searchBar">
-          <span><pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon></span>
-          <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" />
-        </div>
-      </div>
-      <div class="table-responsive">
-        <table class="table-hover table-filters nowrap-cells table">
-          <thead>
-            <tr>
-              <th>
-                <a ng-click="$ctrl.changeOrderBy('Endpoint')">
-                  Environment
-                  <span><pr-icon icon="'arrow-down'" ng-if="$ctrl.state.orderBy === 'Endpoint' && !$ctrl.state.reverseOrder"></pr-icon></span>
-                  <span><pr-icon icon="'arrow-up'" ng-if="$ctrl.state.orderBy === 'Endpoint' && $ctrl.state.reverseOrder"></pr-icon></span>
-                </a>
-              </th>
-              <th> Actions </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-            >
-              <td>
-                {{ item.Endpoint.Name }}
-              </td>
-              <td>
-                <button ng-if="item.LogsStatus === 0 || item.LogsStatus === 1" class="btn btn-sm btn-primary" ng-click="$ctrl.collectLogs(item.EndpointId)"> Retrieve logs </button>
-                <button ng-if="item.LogsStatus === 3" class="btn btn-sm btn-primary" ng-click="$ctrl.onDownloadLogsClick(item.EndpointId)"> Download logs </button>
-                <button ng-if="item.LogsStatus === 3" class="btn btn-sm btn-primary" ng-click="$ctrl.onClearLogsClick(item.EndpointId)"> Clear logs </button>
-                <span ng-if="item.LogsStatus === 2"> Logs marked for collection, please wait until the logs are available. </span>
-              </td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="9" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="9" class="text-muted text-center">No result available.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <div class="paginationControls">
-          <form class="form-inline">
-            <span class="limitSelector">
-              <span class="mr-1"> 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/edge/components/edge-job-results-datatable/edgeJobResultsDatatableController.js

@@ -1,30 +0,0 @@
-import angular from 'angular';
-import _ from 'lodash-es';
-
-export class EdgeJobResultsDatatableController {
-  /* @ngInject */
-  constructor($controller, $scope, $state) {
-    this.$state = $state;
-    angular.extend(this, $controller('GenericDatatableController', { $scope }));
-  }
-
-  collectLogs(...args) {
-    this.settings.repeater.autoRefresh = true;
-    this.settings.repeater.refreshRate = '5';
-    this.onSettingsRepeaterChange();
-    this.onCollectLogsClick(...args);
-  }
-
-  $onChanges({ dataset }) {
-    if (dataset && dataset.currentValue) {
-      this.onDatasetChange(dataset.currentValue);
-    }
-  }
-
-  onDatasetChange(dataset) {
-    const anyCollecting = _.some(dataset, (item) => item.LogsStatus === 2);
-    this.settings.repeater.autoRefresh = anyCollecting;
-    this.settings.repeater.refreshRate = '5';
-    this.onSettingsRepeaterChange();
-  }
-}

app/edge/components/edge-job-results-datatable/index.js

@@ -1,21 +0,0 @@
-import angular from 'angular';
-
-import { EdgeJobResultsDatatableController } from './edgeJobResultsDatatableController';
-import './edgeJobResultsDatatable.css';
-
-angular.module('portainer.edge').component('edgeJobResultsDatatable', {
-  templateUrl: './edgeJobResultsDatatable.html',
-  controller: EdgeJobResultsDatatableController,
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-    onDownloadLogsClick: '<',
-    onCollectLogsClick: '<',
-    onClearLogsClick: '<',
-    refreshCallback: '<',
-  },
-});

app/edge/react/components/edge-jobs.ts

@@ -0,0 +1,18 @@
+import angular from 'angular';
+
+import { r2a } from '@/react-tools/react2angular';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { ResultsDatatable } from '@/react/edge/edge-jobs/ItemView/ResultsDatatable/ResultsDatatable';
+
+export const edgeJobsModule = angular
+  .module('portainer.edge.react.components.edge-jobs', [])
+  .component(
+    'edgeJobResultsDatatable',
+    r2a(withUIRouter(ResultsDatatable), [
+      'dataset',
+      'onClearLogs',
+      'onCollectLogs',
+      'onDownloadLogs',
+      'onRefresh',
+    ])
+  ).name;

app/edge/react/components/index.ts

@@ -15,8 +15,10 @@ import { AssociatedEdgeEnvironmentsSelector } from '@/react/edge/components/Asso
 import { EnvironmentsDatatable } from '@/react/edge/edge-stacks/ItemView/EnvironmentsDatatable';
 import { TemplateFieldset } from '@/react/edge/edge-stacks/CreateView/TemplateFieldset/TemplateFieldset';
 
+import { edgeJobsModule } from './edge-jobs';
+
 const ngModule = angular
-  .module('portainer.edge.react.components', [])
+  .module('portainer.edge.react.components', [edgeJobsModule])
   .component(
     'edgeStackEnvironmentsDatatable',
     r2a(withUIRouter(withReactQuery(EnvironmentsDatatable)), [])

app/edge/views/edge-jobs/edgeJob/edgeJob.html

@@ -30,17 +30,13 @@
             </uib-tab-heading>
 
             <edge-job-results-datatable
+              class="mt-4 block"
               ng-if="$ctrl.results"
-              title-text="Results"
-              title-icon="list"
               dataset="$ctrl.results"
-              table-key="edge-job-results"
+              on-refresh="($ctrl.refresh)"
-              order-by="Status"
+              on-download-logs="($ctrl.downloadLogs)"
-              reverse-order="true"
+              on-collect-logs="($ctrl.collectLogs)"
-              refresh-callback="$ctrl.refresh"
+              on-clear-logs="($ctrl.clearLogs)"
-              on-download-logs-click="($ctrl.downloadLogs)"
-              on-collect-logs-click="($ctrl.collectLogs)"
-              on-clear-logs-click="($ctrl.clearLogs)"
             ></edge-job-results-datatable>
           </uib-tab>
         </uib-tabset>

app/edge/views/edge-jobs/edgeJob/edgeJobController.js

@@ -86,8 +86,14 @@ export class EdgeJobController {
   async collectLogsAsync(endpointId) {
     try {
       await this.EdgeJobService.collectLogs(this.edgeJob.Id, endpointId);
-      const result = _.find(this.results, (result) => result.EndpointId === endpointId);
+      this.results = this.results.map((result) =>
-      result.LogsStatus = 2;
+        result.EndpointId === endpointId
+          ? {
+              ...result,
+              LogsStatus: 2,
+            }
+          : result
+      );
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to collect logs');
     }
@@ -99,8 +105,14 @@ export class EdgeJobController {
   async clearLogsAsync(endpointId) {
     try {
       await this.EdgeJobService.clearLogs(this.edgeJob.Id, endpointId);
-      const result = _.find(this.results, (result) => result.EndpointId === endpointId);
+      this.results = this.results.map((result) =>
-      result.LogsStatus = 1;
+        result.EndpointId === endpointId
+          ? {
+              ...result,
+              LogsStatus: 1,
+            }
+          : result
+      );
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to clear logs');
     }

app/react/edge/edge-jobs/ItemView/ResultsDatatable/ResultsDatatable.tsx

@@ -0,0 +1,66 @@
+import { List } from 'lucide-react';
+import { useEffect } from 'react';
+
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { Datatable } from '@@/datatables';
+import { useTableState } from '@@/datatables/useTableState';
+import { withMeta } from '@@/datatables/extend-options/withMeta';
+import { useRepeater } from '@@/datatables/useRepeater';
+
+import { LogsStatus } from '../../types';
+
+import { DecoratedJobResult } from './types';
+import { columns } from './columns';
+import { createStore } from './datatable-store';
+
+const tableKey = 'edge-job-results';
+const store = createStore(tableKey);
+
+export function ResultsDatatable({
+  dataset,
+  onCollectLogs,
+  onClearLogs,
+  onDownloadLogs,
+  onRefresh,
+}: {
+  dataset: Array<DecoratedJobResult>;
+
+  onCollectLogs(envId: EnvironmentId): void;
+  onDownloadLogs(envId: EnvironmentId): void;
+  onClearLogs(envId: EnvironmentId): void;
+  onRefresh(): void;
+}) {
+  const anyCollecting = dataset.some(
+    (r) => r.LogsStatus === LogsStatus.Pending
+  );
+  const tableState = useTableState(store, tableKey);
+
+  const { setAutoRefreshRate } = tableState;
+
+  useEffect(() => {
+    setAutoRefreshRate(anyCollecting ? 5 : 0);
+  }, [anyCollecting, setAutoRefreshRate]);
+
+  useRepeater(tableState.autoRefreshRate, onRefresh);
+  return (
+    <Datatable
+      disableSelect
+      columns={columns}
+      dataset={dataset}
+      title="Results"
+      titleIcon={List}
+      settingsManager={tableState}
+      extendTableOptions={withMeta({
+        table: 'edge-job-results',
+        collectLogs: handleCollectLogs,
+        downloadLogs: onDownloadLogs,
+        clearLogs: onClearLogs,
+      })}
+    />
+  );
+
+  function handleCollectLogs(envId: EnvironmentId) {
+    onCollectLogs(envId);
+  }
+}

app/react/edge/edge-jobs/ItemView/ResultsDatatable/columns.tsx

@@ -0,0 +1,60 @@
+import { CellContext, createColumnHelper } from '@tanstack/react-table';
+
+import { Button } from '@@/buttons';
+
+import { LogsStatus } from '../../types';
+
+import { DecoratedJobResult, getTableMeta } from './types';
+
+const columnHelper = createColumnHelper<DecoratedJobResult>();
+
+export const columns = [
+  columnHelper.accessor('Endpoint.Name', {
+    header: 'Environment',
+    meta: {
+      className: 'w-1/2',
+    },
+  }),
+  columnHelper.display({
+    header: 'Actions',
+    cell: ActionsCell,
+    meta: {
+      className: 'w-1/2',
+    },
+  }),
+];
+
+function ActionsCell({
+  row: { original: item },
+  table,
+}: CellContext<DecoratedJobResult, unknown>) {
+  const tableMeta = getTableMeta(table.options.meta);
+
+  switch (item.LogsStatus) {
+    case LogsStatus.Pending:
+      return (
+        <>
+          Logs marked for collection, please wait until the logs are available.
+        </>
+      );
+
+    case LogsStatus.Collected:
+      return (
+        <>
+          <Button onClick={() => tableMeta.downloadLogs(item.EndpointId)}>
+            Download logs
+          </Button>
+          <Button onClick={() => tableMeta.clearLogs(item.EndpointId)}>
+            Clear logs
+          </Button>
+        </>
+      );
+    case LogsStatus.Idle:
+    default:
+      return (
+        <Button onClick={() => tableMeta.collectLogs(item.EndpointId)}>
+          Retrieve logs
+        </Button>
+      );
+  }
+}

app/react/edge/edge-jobs/ItemView/ResultsDatatable/datatable-store.ts

@@ -0,0 +1,14 @@
+import {
+  refreshableSettings,
+  createPersistedStore,
+  BasicTableSettings,
+  RefreshableTableSettings,
+} from '@@/datatables/types';
+
+interface TableSettings extends BasicTableSettings, RefreshableTableSettings {}
+
+export function createStore(storageKey: string) {
+  return createPersistedStore<TableSettings>(storageKey, undefined, (set) => ({
+    ...refreshableSettings(set),
+  }));
+}

app/react/edge/edge-jobs/ItemView/ResultsDatatable/types.ts

@@ -0,0 +1,34 @@
+import {
+  Environment,
+  EnvironmentId,
+} from '@/react/portainer/environments/types';
+
+import { JobResult } from '../../types';
+
+export interface DecoratedJobResult extends JobResult {
+  Endpoint: Environment;
+}
+
+interface TableMeta {
+  table: 'edge-job-results';
+  collectLogs(envId: EnvironmentId): void;
+  downloadLogs(envId: EnvironmentId): void;
+  clearLogs(envId: EnvironmentId): void;
+}
+
+function isTableMeta(meta: unknown): meta is TableMeta {
+  return (
+    !!meta &&
+    typeof meta === 'object' &&
+    'table' in meta &&
+    meta.table === 'edge-job-results'
+  );
+}
+
+export function getTableMeta(meta: unknown): TableMeta {
+  if (!isTableMeta(meta)) {
+    throw new Error('missing correct table meta');
+  }
+
+  return meta;
+}

app/react/edge/edge-jobs/types.ts

@@ -14,7 +14,7 @@ export interface EdgeJob {
   GroupLogsCollection: Record<EnvironmentId, EndpointMeta>;
 }
 
-enum LogsStatus {
+export enum LogsStatus {
   Idle = 1,
   Pending = 2,
   Collected = 3,
@@ -24,3 +24,9 @@ interface EndpointMeta {
   LogsStatus: LogsStatus;
   CollectLogs: boolean;
 }
+
+export interface JobResult {
+  Id: string;
+  EndpointId: EnvironmentId;
+  LogsStatus: LogsStatus;
+}