From 5b3f099f4ec32700ef99aed2f1a9e9a0a7637fec Mon Sep 17 00:00:00 2001 From: Rex Wang <109048808+RexWangPT@users.noreply.github.com> Date: Mon, 25 Jul 2022 07:57:18 +0800 Subject: [PATCH] fix(UI) Update all network pages EE-3509 (#7324) * EE-3509 update all network pages * EE-3509 update access control panel and network container table --- .../networks-datatable/networksDatatable.html | 44 +++++++++---------- .../views/networks/create/createnetwork.html | 8 ++-- .../AccessControlPanel/AccessControlPanel.tsx | 12 ++--- .../porAccessControlForm.html | 15 ++++--- .../porAccessControlFormController.js | 9 +++- .../ItemView/NetworkContainersTable.tsx | 12 ++--- .../networks/ItemView/NetworkDetailsTable.tsx | 19 ++++---- .../networks/ItemView/NetworkOptionsTable.tsx | 12 ++--- 8 files changed, 71 insertions(+), 60 deletions(-) diff --git a/app/docker/components/datatables/networks-datatable/networksDatatable.html b/app/docker/components/datatables/networks-datatable/networksDatatable.html index 5457c76e4..8b03dba7f 100644 --- a/app/docker/components/datatables/networks-datatable/networksDatatable.html +++ b/app/docker/components/datatables/networks-datatable/networksDatatable.html @@ -93,78 +93,78 @@ Name - - + + Stack - - + + Driver - - + + Attachable - - + + IPAM Driver - - + + IPV4 IPAM Subnet - - + + IPV4 IPAM Gateway - - + + IPV6 IPAM Subnet - - + + IPV6 IPAM Gateway - - + + Host - - + + Ownership - - + + diff --git a/app/docker/views/networks/create/createnetwork.html b/app/docker/views/networks/create/createnetwork.html index b3a05a2a6..a6cc2368e 100644 --- a/app/docker/views/networks/create/createnetwork.html +++ b/app/docker/views/networks/create/createnetwork.html @@ -45,7 +45,7 @@
@@ -92,7 +92,7 @@ />

Exclude ip cannot be the same as gateway.

@@ -139,7 +139,7 @@ />

Exclude ip cannot be the same as gateway.

@@ -167,7 +167,7 @@
diff --git a/app/portainer/access-control/AccessControlPanel/AccessControlPanel.tsx b/app/portainer/access-control/AccessControlPanel/AccessControlPanel.tsx index 790754cd0..9158866d4 100644 --- a/app/portainer/access-control/AccessControlPanel/AccessControlPanel.tsx +++ b/app/portainer/access-control/AccessControlPanel/AccessControlPanel.tsx @@ -5,7 +5,7 @@ import { r2a } from '@/react-tools/react2angular'; import { TeamMembership, Role } from '@/portainer/teams/types'; import { useUserMembership } from '@/portainer/users/queries'; -import { Widget, WidgetBody, WidgetTitle } from '@@/Widget'; +import { Table, TableContainer, TableTitle } from '@@/datatables'; import { Button } from '@@/buttons'; import { ResourceControlType, ResourceId } from '../types'; @@ -45,9 +45,9 @@ export function AccessControlPanel({ return (
- - - + + + )} - - +
+
); diff --git a/app/portainer/components/accessControlForm/porAccessControlForm.html b/app/portainer/components/accessControlForm/porAccessControlForm.html index e51dee568..1e55b57dd 100644 --- a/app/portainer/components/accessControlForm/porAccessControlForm.html +++ b/app/portainer/components/accessControlForm/porAccessControlForm.html @@ -3,13 +3,14 @@
- - +
diff --git a/app/portainer/components/accessControlForm/porAccessControlFormController.js b/app/portainer/components/accessControlForm/porAccessControlFormController.js index 9131ba8e5..34f208f73 100644 --- a/app/portainer/components/accessControlForm/porAccessControlFormController.js +++ b/app/portainer/components/accessControlForm/porAccessControlFormController.js @@ -3,12 +3,13 @@ import { ResourceControlOwnership as RCO } from '@/portainer/access-control/type angular.module('portainer.app').controller('porAccessControlFormController', [ '$q', + '$scope', 'UserService', 'TeamService', 'Notifications', 'Authentication', 'ResourceControlService', - function ($q, UserService, TeamService, Notifications, Authentication, ResourceControlService) { + function ($q, $scope, UserService, TeamService, Notifications, Authentication, ResourceControlService) { var ctrl = this; ctrl.RCO = RCO; @@ -79,6 +80,12 @@ angular.module('portainer.app').controller('porAccessControlFormController', [ .catch(function error(err) { Notifications.error('Failure', err, 'Unable to retrieve access control information'); }); + + this.onChangeEnablement = function (enable) { + $scope.$evalAsync(() => { + ctrl.formData.AccessControlEnabled = enable; + }); + }; } }, ]); diff --git a/app/react/docker/networks/ItemView/NetworkContainersTable.tsx b/app/react/docker/networks/ItemView/NetworkContainersTable.tsx index 935ff29f1..14a9d1712 100644 --- a/app/react/docker/networks/ItemView/NetworkContainersTable.tsx +++ b/app/react/docker/networks/ItemView/NetworkContainersTable.tsx @@ -1,7 +1,7 @@ import { Authorized } from '@/portainer/hooks/useUser'; import { EnvironmentId } from '@/portainer/environments/types'; -import { Widget, WidgetBody, WidgetTitle } from '@@/Widget'; +import { Table, TableContainer, TableTitle } from '@@/datatables'; import { DetailsTable } from '@@/DetailsTable'; import { Button } from '@@/buttons'; import { Link } from '@@/Link'; @@ -39,9 +39,9 @@ export function NetworkContainersTable({ return (
- - - + + + ))} - - +
+
); diff --git a/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx b/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx index 198194e72..b845945d7 100644 --- a/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx +++ b/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx @@ -3,9 +3,10 @@ import DockerNetworkHelper from 'Docker/helpers/networkHelper'; import { Authorized } from '@/portainer/hooks/useUser'; -import { Widget, WidgetBody, WidgetTitle } from '@@/Widget'; +import { Table, TableContainer, TableTitle } from '@@/datatables'; import { DetailsTable } from '@@/DetailsTable'; import { Button } from '@@/buttons'; +import { Icon } from '@@/Icon'; import { isSystemNetwork } from '../network.helper'; import { DockerNetwork, IPConfig } from '../types'; @@ -30,9 +31,9 @@ export function NetworkDetailsTable({ return (
- - - + + + {/* networkRowContent */} {network.Name} @@ -46,8 +47,10 @@ export function NetworkDetailsTable({ color="danger" onClick={() => onRemoveNetworkClicked()} > -