mirror of https://github.com/portainer/portainer
refactor(docker/containers): migrate processes table to react [EE-4666] (#10081)
Chaim Lev-Ari
GitHub
parent
e5880b3e34
commit
46e73ee524
|
|
@ -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>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
angular.module('portainer.docker').component('containerProcessesDatatable', {
|
||||
templateUrl: './containerProcessesDatatable.html',
|
||||
controller: 'GenericDatatableController',
|
||||
bindings: {
|
||||
titleText: '@',
|
||||
titleIcon: '@',
|
||||
dataset: '=',
|
||||
headerset: '<',
|
||||
tableKey: '@',
|
||||
orderBy: '@',
|
||||
reverseOrder: '<',
|
||||
},
|
||||
});
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -108,14 +108,4 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<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>
|
||||
<docker-container-processes-datatable dataset="processInfo.Processes" headers="processInfo.Titles"></docker-container-processes-datatable>
|
||||
|
|
|
|||
|
|
@ -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."
|
||||
/>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue