github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

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
pull/7307/head^2
Rex Wang 2022-07-25 07:57:18 +08:00 committed by GitHub
parent 5f5cb36df1
commit 5b3f099f4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 71 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/docker/components/datatables/networks-datatable/networksDatatable.html
View File

@ -93,78 +93,78 @@
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Name')"> <a ng-click="$ctrl.changeOrderBy('Name')">
Name Name
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"> </pr-icon>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"> </pr-icon>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('StackName')"> <a ng-click="$ctrl.changeOrderBy('StackName')">
Stack Stack
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"> </pr-icon>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"> </pr-icon>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Driver')"> <a ng-click="$ctrl.changeOrderBy('Driver')">
Driver Driver
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Driver' && !$ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Driver' && !$ctrl.state.reverseOrder"> </pr-icon>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Driver' && $ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Driver' && $ctrl.state.reverseOrder"> </pr-icon>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('Attachable')"> <a ng-click="$ctrl.changeOrderBy('Attachable')">
Attachable Attachable
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Attachable' && !$ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Attachable' && !$ctrl.state.reverseOrder"> </pr-icon>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Attachable' && $ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Attachable' && $ctrl.state.reverseOrder"> </pr-icon>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('IPAM.Driver')"> <a ng-click="$ctrl.changeOrderBy('IPAM.Driver')">
IPAM Driver IPAM Driver
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.Driver' && !$ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.Driver' && !$ctrl.state.reverseOrder"> </pr-icon>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.Driver' && $ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.Driver' && $ctrl.state.reverseOrder"> </pr-icon>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Subnet')"> <a ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Subnet')">
IPV4 IPAM Subnet IPV4 IPAM Subnet
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && !$ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && !$ctrl.state.reverseOrder"> </pr-icon>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && $ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && $ctrl.state.reverseOrder"> </pr-icon>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Gateway')"> <a ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Gateway')">
IPV4 IPAM Gateway IPV4 IPAM Gateway
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && !$ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && !$ctrl.state.reverseOrder"> </pr-icon>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && $ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && $ctrl.state.reverseOrder"> </pr-icon>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Subnet')"> <a ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Subnet')">
IPV6 IPAM Subnet IPV6 IPAM Subnet
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && !$ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && !$ctrl.state.reverseOrder"> </pr-icon>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && $ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && $ctrl.state.reverseOrder"> </pr-icon>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Gateway')"> <a ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Gateway')">
IPV6 IPAM Gateway IPV6 IPAM Gateway
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && !$ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && !$ctrl.state.reverseOrder"> </pr-icon>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && $ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && $ctrl.state.reverseOrder"> </pr-icon>
</a> </a>
</th> </th>
<th ng-if="$ctrl.showHostColumn"> <th ng-if="$ctrl.showHostColumn">
<a ng-click="$ctrl.changeOrderBy('NodeName')"> <a ng-click="$ctrl.changeOrderBy('NodeName')">
Host Host
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && !$ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'NodeName' && !$ctrl.state.reverseOrder"> </pr-icon>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"> </pr-icon>
</a> </a>
</th> </th>
<th> <th>
<a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"> <a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
Ownership Ownership
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></pr-icon>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></i> <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></pr-icon>
</a> </a>
</th> </th>
</tr> </tr>

8
app/docker/views/networks/create/createnetwork.html
View File

@ -45,7 +45,7 @@
<input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true" /> <input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true" />
</div> </div>
<button class="btn btn-sm btn-light" type="button" ng-click="removeDriverOption($index)"> <button class="btn btn-sm btn-light" type="button" ng-click="removeDriverOption($index)">
<pr-icon icon="'trash'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon> <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
</button> </button>
</div> </div>
<div class="small interactive text-muted vertical-center mt-1" ng-click="addDriverOption()"> <div class="small interactive text-muted vertical-center mt-1" ng-click="addDriverOption()">
@ -92,7 +92,7 @@
/> />
</div> </div>
<button class="btn btn-md btn-light" type="button" ng-click="removeIPV4AuxAddress($index)"> <button class="btn btn-md btn-light" type="button" ng-click="removeIPV4AuxAddress($index)">
<pr-icon icon="'trash'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon> <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
</button> </button>
<div class="col-sm-12 small text-warning" ng-if="state.IPV4AuxiliaryAddressesError[$index]"> <div class="col-sm-12 small text-warning" ng-if="state.IPV4AuxiliaryAddressesError[$index]">
<p class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Exclude ip cannot be the same as gateway.</p> <p class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Exclude ip cannot be the same as gateway.</p>
@ -139,7 +139,7 @@
/> />
</div> </div>
<button class="btn btn-md btn-light" type="button" ng-click="removeIPV6AuxAddress($index)"> <button class="btn btn-md btn-light" type="button" ng-click="removeIPV6AuxAddress($index)">
<pr-icon icon="'trash'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon> <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
</button> </button>
<div class="col-sm-12 small text-warning" ng-show="state.IPV6AuxiliaryAddressesError[$index]"> <div class="col-sm-12 small text-warning" ng-show="state.IPV6AuxiliaryAddressesError[$index]">
<p class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Exclude ip cannot be the same as gateway.</p> <p class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Exclude ip cannot be the same as gateway.</p>
@ -167,7 +167,7 @@
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" /> <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
</div> </div>
<button class="btn btn-sm btn-light" type="button" ng-click="removeLabel($index)"> <button class="btn btn-sm btn-light" type="button" ng-click="removeLabel($index)">
<pr-icon icon="'trash'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon> <pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
</button> </button>
</div> </div>
<div class="form-group"> <div class="form-group">

12
app/portainer/access-control/AccessControlPanel/AccessControlPanel.tsx
View File

@ -5,7 +5,7 @@ import { r2a } from '@/react-tools/react2angular';
import { TeamMembership, Role } from '@/portainer/teams/types'; import { TeamMembership, Role } from '@/portainer/teams/types';
import { useUserMembership } from '@/portainer/users/queries'; import { useUserMembership } from '@/portainer/users/queries';
import { Widget, WidgetBody, WidgetTitle } from '@@/Widget'; import { Table, TableContainer, TableTitle } from '@@/datatables';
import { Button } from '@@/buttons'; import { Button } from '@@/buttons';
import { ResourceControlType, ResourceId } from '../types'; import { ResourceControlType, ResourceId } from '../types';
@ -45,9 +45,9 @@ export function AccessControlPanel({
return ( return (
<div className="row"> <div className="row">
<div className="col-sm-12"> <div className="col-sm-12">
<Widget> <TableContainer>
<WidgetTitle title="Access control" icon="fa-eye" /> <TableTitle label="Access control" icon="eye" featherIcon />
<WidgetBody className="no-padding"> <Table className="no-padding">
<AccessControlPanelDetails <AccessControlPanelDetails
resourceType={resourceType} resourceType={resourceType}
resourceControl={resourceControl} resourceControl={resourceControl}
@ -73,8 +73,8 @@ export function AccessControlPanel({
onUpdateSuccess={handleUpdateSuccess} onUpdateSuccess={handleUpdateSuccess}
/> />
)} )}
</WidgetBody> </Table>
</Widget> </TableContainer>
</div> </div>
</div> </div>
); );

15
app/portainer/components/accessControlForm/porAccessControlForm.html
View File

@ -3,13 +3,14 @@
<!-- access-control-switch --> <!-- access-control-switch -->
<div class="form-group"> <div class="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<label for="ownership" class="control-label text-left"> <por-switch-field
Enable access control label-class="'col-sm-2'"
<portainer-tooltip message="'When enabled, you can restrict the access and management of this resource.'"></portainer-tooltip> checked="$ctrl.formData.AccessControlEnabled"
</label> label="'Enable access control'"
<label class="switch" style="margin-left: 20px"> tooltip="'When enabled, you can restrict the access and management of this resource.'"
<input name="ownership" type="checkbox" ng-model="$ctrl.formData.AccessControlEnabled" /><i data-cy="portainer-accessMgmtToggle"></i> on-change="($ctrl.onChangeEnablement)"
</label> data-cy="portainer-accessMgmtToggle"
></por-switch-field>
</div> </div>
</div> </div>
<!-- !access-control-switch --> <!-- !access-control-switch -->

9
app/portainer/components/accessControlForm/porAccessControlFormController.js
View File

@ -3,12 +3,13 @@ import { ResourceControlOwnership as RCO } from '@/portainer/access-control/type
angular.module('portainer.app').controller('porAccessControlFormController', [ angular.module('portainer.app').controller('porAccessControlFormController', [
'$q', '$q',
'$scope',
'UserService', 'UserService',
'TeamService', 'TeamService',
'Notifications', 'Notifications',
'Authentication', 'Authentication',
'ResourceControlService', 'ResourceControlService',
function ($q, UserService, TeamService, Notifications, Authentication, ResourceControlService) { function ($q, $scope, UserService, TeamService, Notifications, Authentication, ResourceControlService) {
var ctrl = this; var ctrl = this;
ctrl.RCO = RCO; ctrl.RCO = RCO;
@ -79,6 +80,12 @@ angular.module('portainer.app').controller('porAccessControlFormController', [
.catch(function error(err) { .catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve access control information'); Notifications.error('Failure', err, 'Unable to retrieve access control information');
}); });
this.onChangeEnablement = function (enable) {
$scope.$evalAsync(() => {
ctrl.formData.AccessControlEnabled = enable;
});
};
} }
}, },
]); ]);

12
app/react/docker/networks/ItemView/NetworkContainersTable.tsx
View File

@ -1,7 +1,7 @@
import { Authorized } from '@/portainer/hooks/useUser'; import { Authorized } from '@/portainer/hooks/useUser';
import { EnvironmentId } from '@/portainer/environments/types'; import { EnvironmentId } from '@/portainer/environments/types';
import { Widget, WidgetBody, WidgetTitle } from '@@/Widget'; import { Table, TableContainer, TableTitle } from '@@/datatables';
import { DetailsTable } from '@@/DetailsTable'; import { DetailsTable } from '@@/DetailsTable';
import { Button } from '@@/buttons'; import { Button } from '@@/buttons';
import { Link } from '@@/Link'; import { Link } from '@@/Link';
@ -39,9 +39,9 @@ export function NetworkContainersTable({
return ( return (
<div className="row"> <div className="row">
<div className="col-lg-12 col-md-12 col-xs-12"> <div className="col-lg-12 col-md-12 col-xs-12">
<Widget> <TableContainer>
<WidgetTitle title="Containers in network" icon="fa-server" /> <TableTitle label="Containers in network" icon="server" featherIcon />
<WidgetBody className="nopadding"> <Table className="nopadding">
<DetailsTable <DetailsTable
headers={tableHeaders} headers={tableHeaders}
dataCy="networkDetails-networkContainers" dataCy="networkDetails-networkContainers"
@ -90,8 +90,8 @@ export function NetworkContainersTable({
</tr> </tr>
))} ))}
</DetailsTable> </DetailsTable>
</WidgetBody> </Table>
</Widget> </TableContainer>
</div> </div>
</div> </div>
); );

19
app/react/docker/networks/ItemView/NetworkDetailsTable.tsx
View File

@ -3,9 +3,10 @@ import DockerNetworkHelper from 'Docker/helpers/networkHelper';
import { Authorized } from '@/portainer/hooks/useUser'; import { Authorized } from '@/portainer/hooks/useUser';
import { Widget, WidgetBody, WidgetTitle } from '@@/Widget'; import { Table, TableContainer, TableTitle } from '@@/datatables';
import { DetailsTable } from '@@/DetailsTable'; import { DetailsTable } from '@@/DetailsTable';
import { Button } from '@@/buttons'; import { Button } from '@@/buttons';
import { Icon } from '@@/Icon';
import { isSystemNetwork } from '../network.helper'; import { isSystemNetwork } from '../network.helper';
import { DockerNetwork, IPConfig } from '../types'; import { DockerNetwork, IPConfig } from '../types';
@ -30,9 +31,9 @@ export function NetworkDetailsTable({
return ( return (
<div className="row"> <div className="row">
<div className="col-lg-12 col-md-12 col-xs-12"> <div className="col-lg-12 col-md-12 col-xs-12">
<Widget> <TableContainer>
<WidgetTitle title="Network details" icon="fa-sitemap" /> <TableTitle label="Network details" icon="share-2" featherIcon />
<WidgetBody className="nopadding"> <Table className="nopadding">
<DetailsTable dataCy="networkDetails-detailsTable"> <DetailsTable dataCy="networkDetails-detailsTable">
{/* networkRowContent */} {/* networkRowContent */}
<DetailsTable.Row label="Name">{network.Name}</DetailsTable.Row> <DetailsTable.Row label="Name">{network.Name}</DetailsTable.Row>
@ -46,8 +47,10 @@ export function NetworkDetailsTable({
color="danger" color="danger"
onClick={() => onRemoveNetworkClicked()} onClick={() => onRemoveNetworkClicked()}
> >
<i <Icon
className="fa fa-trash-alt space-right" icon="trash-2"
feather
className="space-right"
aria-hidden="true" aria-hidden="true"
/> />
Delete this network Delete this network
@ -102,8 +105,8 @@ export function NetworkDetailsTable({
</Fragment> </Fragment>
))} ))}
</DetailsTable> </DetailsTable>
</WidgetBody> </Table>
</Widget> </TableContainer>
</div> </div>
</div> </div>
); );

12
app/react/docker/networks/ItemView/NetworkOptionsTable.tsx
View File

@ -1,4 +1,4 @@
import { Widget, WidgetBody, WidgetTitle } from '@@/Widget'; import { Table, TableContainer, TableTitle } from '@@/datatables';
import { DetailsTable } from '@@/DetailsTable'; import { DetailsTable } from '@@/DetailsTable';
import { NetworkOptions } from '../types'; import { NetworkOptions } from '../types';
@ -17,9 +17,9 @@ export function NetworkOptionsTable({ options }: Props) {
return ( return (
<div className="row"> <div className="row">
<div className="col-lg-12 col-md-12 col-xs-12"> <div className="col-lg-12 col-md-12 col-xs-12">
<Widget> <TableContainer>
<WidgetTitle title="Network options" icon="fa-cogs" /> <TableTitle label="Network options" icon="share-2" featherIcon />
<WidgetBody className="nopadding"> <Table className="nopadding">
<DetailsTable dataCy="networkDetails-networkOptionsTable"> <DetailsTable dataCy="networkDetails-networkOptionsTable">
{networkEntries.map(([key, value]) => ( {networkEntries.map(([key, value]) => (
<DetailsTable.Row key={key} label={key}> <DetailsTable.Row key={key} label={key}>
@ -27,8 +27,8 @@ export function NetworkOptionsTable({ options }: Props) {
</DetailsTable.Row> </DetailsTable.Row>
))} ))}
</DetailsTable> </DetailsTable>
</WidgetBody> </Table>
</Widget> </TableContainer>
</div> </div>
</div> </div>
); );