diff --git a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
index 7af8b6fd1..ea2a4e679 100644
--- a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
+++ b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
@@ -89,13 +89,7 @@
>
|
-
+
= []) {
return command.join(' ');
}
+
+export function taskStatusBadge(text?: TaskState) {
+ const status = _.toLower(text);
+ if (
+ [
+ 'new',
+ 'allocated',
+ 'assigned',
+ 'accepted',
+ 'preparing',
+ 'ready',
+ 'starting',
+ 'remove',
+ ].includes(status)
+ ) {
+ return 'info';
+ }
+
+ if (['pending'].includes(status)) {
+ return 'warning';
+ }
+
+ if (['shutdown', 'failed', 'rejected', 'orphaned'].includes(status)) {
+ return 'danger';
+ }
+
+ if (['complete'].includes(status)) {
+ return 'primary';
+ }
+
+ if (['running'].includes(status)) {
+ return 'success';
+ }
+ return 'default';
+}
diff --git a/app/docker/models/task.js b/app/docker/models/task.js
deleted file mode 100644
index 6e16b3a56..000000000
--- a/app/docker/models/task.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export function TaskViewModel(data) {
- this.Id = data.ID;
- this.Created = data.CreatedAt;
- this.Updated = data.UpdatedAt;
- this.Slot = data.Slot;
- this.Spec = data.Spec;
- this.Status = data.Status;
- this.DesiredState = data.DesiredState;
- this.ServiceId = data.ServiceID;
- this.NodeId = data.NodeID;
- if (data.Status && data.Status.ContainerStatus && data.Status.ContainerStatus.ContainerID) {
- this.ContainerId = data.Status.ContainerStatus.ContainerID;
- }
-}
diff --git a/app/docker/models/task.ts b/app/docker/models/task.ts
new file mode 100644
index 000000000..c67a41171
--- /dev/null
+++ b/app/docker/models/task.ts
@@ -0,0 +1,36 @@
+import { Task, TaskSpec, TaskState } from 'docker-types/generated/1.41';
+
+export class TaskViewModel {
+ Id: string;
+
+ Created: string;
+
+ Updated: string;
+
+ Slot: number;
+
+ Spec?: TaskSpec;
+
+ Status: Task['Status'];
+
+ DesiredState: TaskState;
+
+ ServiceId: string;
+
+ NodeId: string;
+
+ ContainerId: string = '';
+
+ constructor(data: Task) {
+ this.Id = data.ID || '';
+ this.Created = data.CreatedAt || '';
+ this.Updated = data.UpdatedAt || '';
+ this.Slot = data.Slot || 0;
+ this.Spec = data.Spec;
+ this.Status = data.Status;
+ this.DesiredState = data.DesiredState || 'pending';
+ this.ServiceId = data.ServiceID || '';
+ this.NodeId = data.NodeID || '';
+ this.ContainerId = data.Status?.ContainerStatus?.ContainerID || '';
+ }
+}
diff --git a/app/docker/react/components/index.ts b/app/docker/react/components/index.ts
index df5338c60..781281e7f 100644
--- a/app/docker/react/components/index.ts
+++ b/app/docker/react/components/index.ts
@@ -21,8 +21,10 @@ import { ConfigsDatatable } from '@/react/docker/configs/ListView/ConfigsDatatab
import { AgentHostBrowser } from '@/react/docker/host/BrowseView/AgentHostBrowser';
import { AgentVolumeBrowser } from '@/react/docker/volumes/BrowseView/AgentVolumeBrowser';
+import { servicesModule } from './services';
+
const ngModule = angular
- .module('portainer.docker.react.components', [])
+ .module('portainer.docker.react.components', [servicesModule])
.component('dockerfileDetails', r2a(DockerfileDetails, ['image']))
.component('dockerHealthStatus', r2a(HealthStatus, ['health']))
.component(
@@ -32,7 +34,6 @@ const ngModule = angular
'nodeName',
'state',
'status',
- 'taskId',
])
)
.component('templateListDropdown', TemplateListDropdownAngular)
diff --git a/app/docker/react/components/services.ts b/app/docker/react/components/services.ts
new file mode 100644
index 000000000..ec4634823
--- /dev/null
+++ b/app/docker/react/components/services.ts
@@ -0,0 +1,21 @@
+import angular from 'angular';
+
+import { r2a } from '@/react-tools/react2angular';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { TasksDatatable } from '@/react/docker/services/ListView/ServicesDatatable/TasksDatatable';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { TaskTableQuickActions } from '@/react/docker/services/common/TaskTableQuickActions';
+
+export const servicesModule = angular
+ .module('portainer.docker.react.components.services', [])
+ .component(
+ 'dockerServiceTasksDatatable',
+ r2a(withUIRouter(withCurrentUser(TasksDatatable)), ['dataset', 'search'])
+ )
+ .component(
+ 'dockerTaskTableQuickActions',
+ r2a(withUIRouter(withCurrentUser(TaskTableQuickActions)), [
+ 'state',
+ 'taskId',
+ ])
+ ).name;
diff --git a/app/react/components/datatables/NestedDatatable.tsx b/app/react/components/datatables/NestedDatatable.tsx
index 1b0eaaa3b..6569435d5 100644
--- a/app/react/components/datatables/NestedDatatable.tsx
+++ b/app/react/components/datatables/NestedDatatable.tsx
@@ -23,6 +23,11 @@ interface Props {
initialTableState?: Partial;
isLoading?: boolean;
initialSortBy?: BasicTableSettings['sortBy'];
+
+ /**
+ * keyword to filter by
+ */
+ search?: string;
}
export function NestedDatatable({
@@ -33,6 +38,7 @@ export function NestedDatatable({
initialTableState = {},
isLoading,
initialSortBy,
+ search,
}: Props) {
const tableInstance = useReactTable({
columns,
@@ -45,6 +51,9 @@ export function NestedDatatable({
enableColumnFilter: false,
enableHiding: false,
},
+ state: {
+ globalFilter: search,
+ },
getRowId,
autoResetExpanded: false,
getCoreRowModel: getCoreRowModel(),
@@ -55,7 +64,7 @@ export function NestedDatatable({
return (
-
+
tableInstance={tableInstance}
isLoading={isLoading}
diff --git a/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx b/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
index 81ac473d8..891f40a7a 100644
--- a/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
+++ b/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
@@ -9,7 +9,7 @@ import { Link } from '@@/Link';
import styles from './ContainerQuickActions.module.css';
-interface QuickActionsState {
+export interface QuickActionsState {
showQuickActionAttach: boolean;
showQuickActionExec: boolean;
showQuickActionInspect: boolean;
@@ -17,31 +17,25 @@ interface QuickActionsState {
showQuickActionStats: boolean;
}
-interface Props {
- taskId?: string;
- containerId?: string;
- nodeName: string;
- state: QuickActionsState;
- status: ContainerStatus;
-}
-
export function ContainerQuickActions({
- taskId,
+ status,
containerId,
nodeName,
state,
- status,
-}: Props) {
- if (taskId) {
- return ;
- }
-
- const isActive = [
- ContainerStatus.Starting,
- ContainerStatus.Running,
- ContainerStatus.Healthy,
- ContainerStatus.Unhealthy,
- ].includes(status);
+}: {
+ containerId: string;
+ nodeName: string;
+ status: ContainerStatus;
+ state: QuickActionsState;
+}) {
+ const isActive =
+ !!status &&
+ [
+ ContainerStatus.Starting,
+ ContainerStatus.Running,
+ ContainerStatus.Healthy,
+ ContainerStatus.Unhealthy,
+ ].includes(status);
return (
@@ -107,34 +101,3 @@ export function ContainerQuickActions({
);
}
-
-interface TaskProps {
- taskId: string;
- state: QuickActionsState;
-}
-
-function TaskQuickActions({ taskId, state }: TaskProps) {
- return (
-
- {state.showQuickActionLogs && (
-
-
-
-
-
- )}
-
- {state.showQuickActionInspect && (
-
-
-
-
-
- )}
-
+ {state.showQuickActionLogs && (
+
+
+
+
+
+ )}
+
+ {state.showQuickActionInspect && (
+
+
+
+
+
+ )}
+ |