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

fix(UI) Update docker container inspect,log,stats,console,attach pages EE-3492 (#7307) 

* EE-3492 update docker container inspect,log,stats,console,attach pages

* EE-3492 bug fixing

* EE-3492 replace chart bar icon

* EE-3492 bug fix

* Update resourcePoolsDatatable.html

* Update resourcePoolsDatatable.html
pull/7339/head
Rex Wang 2022-07-25 11:03:22 +08:00 committed by GitHub
parent 7ee8dac832
commit 3356d1abe2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 99 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/docker/components/datatables/configs-datatable/configsDatatable.html
View File

@ -13,7 +13,7 @@
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
placeholder="Search for a config..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="config-searchInput"

20
app/docker/components/datatables/container-processes-datatable/containerProcessesDatatable.html
View File

@ -2,11 +2,23 @@
<rd-widget>
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></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 class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" />
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">

26
app/docker/components/datatables/events-datatable/eventsDatatable.html
View File

@ -1,19 +1,25 @@
<div class="datatable">
<rd-widget>
<rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
<rd-widget-body classes="no-padding">
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true"></pr-icon>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
placeholder="Search for an event..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="event-searchInput"
/>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover nowrap-cells">
<thead>
@ -21,22 +27,22 @@
<th>
<a ng-click="$ctrl.changeOrderBy('Time')">
Date
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Time' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Time' && $ctrl.state.reverseOrder"></i>
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Time' && !$ctrl.state.reverseOrder"></pr-icon>
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Time' && $ctrl.state.reverseOrder"></pr-icon>
</a>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Type')">
Category
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></i>
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></pr-icon>
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></pr-icon>
</a>
</th>
<th>
<a ng-click="$ctrl.changeOrderBy('Details')">
Details
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Details' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Details' && $ctrl.state.reverseOrder"></i>
<pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Details' && !$ctrl.state.reverseOrder"></pr-icon>
<pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Details' && $ctrl.state.reverseOrder"></pr-icon>
</a>
</th>
</tr>

2
app/docker/components/datatables/images-datatable/imagesDatatable.html
View File

@ -13,7 +13,7 @@
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
placeholder="Search for an image..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="image-searchInput"

2
app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
View File

@ -11,7 +11,7 @@
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
placeholder="Search for a macvlan..."
auto-focus
ng-model-options="{ debounce: 300 }"
/>

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

@ -13,7 +13,7 @@
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
placeholder="Search for a network..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="network-searchInput"

2
app/docker/components/datatables/nodes-datatable/nodesDatatable.html
View File

@ -13,7 +13,7 @@
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
placeholder="Search for a node..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="node-searchInput"

2
app/docker/components/datatables/secrets-datatable/secretsDatatable.html
View File

@ -13,7 +13,7 @@
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
placeholder="Search for a secret..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="secret-searchInput"

2
app/docker/components/datatables/services-datatable/servicesDatatable.html
View File

@ -13,7 +13,7 @@
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
placeholder="Search for a service..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="service-searchInput"

2
app/docker/components/datatables/volumes-datatable/volumesDatatable.html
View File

@ -13,7 +13,7 @@
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
placeholder="Search for a volume..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="volume-searchInput"

12
app/docker/components/log-viewer/logViewer.html
View File

@ -1,7 +1,7 @@
<div class="row">
<div class="col-sm-12">
<rd-widget>
<rd-widget-header icon="fa-file-alt" title-text="Log viewer settings"></rd-widget-header>
<rd-widget-header icon="file" feather-icon="true" title-text="Log viewer settings"></rd-widget-header>
<rd-widget-body>
<form class="form-horizontal">
<div class="form-group">
@ -54,21 +54,23 @@
<div class="form-group" ng-if="$ctrl.state.copySupported">
<label class="col-sm-1 control-label text-left"> Actions </label>
<div class="col-sm-11">
<button class="btn btn-primary btn-sm" type="button" ng-click="$ctrl.downloadLogs()" style="margin-left: 0"><i class="fa fa-download"></i> Download logs</button>
<button class="btn btn-primary btn-sm" type="button" ng-click="$ctrl.downloadLogs()" style="margin-left: 0"
><pr-icon icon="'download'" feather="true"></pr-icon> Download logs</button
>
<button
class="btn btn-primary btn-sm"
ng-click="$ctrl.copy()"
ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0].line) || !$ctrl.state.filteredLogs.length"
><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy</button
><pr-icon icon="'copy'" feather="true" class-name="space-right"></pr-icon>Copy</button
>
<button
class="btn btn-primary btn-sm"
ng-click="$ctrl.copySelection()"
ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0].line) || !$ctrl.state.filteredLogs.length || !$ctrl.state.selectedLines.length"
><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy selected lines</button
><pr-icon icon="'copy'" feather="true" class-name="space-right"></pr-icon>Copy selected lines</button
>
<button class="btn btn-primary btn-sm" ng-click="$ctrl.clearSelection()" ng-disabled="$ctrl.state.selectedLines.length === 0"
><i class="fa fa-times space-right" aria-hidden="true"></i>Unselect</button
><pr-icon icon="'x'" feather="true" class-name="space-right"></pr-icon>Unselect</button
>
<span>
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-left: 7px; display: none"></i>

2
app/docker/views/containers/console/attach.html
View File

@ -13,7 +13,7 @@
<div class="row" ng-init="autoconnectAttachView()" ng-show="loaded">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-terminal" title-text="Attach"></rd-widget-header>
<rd-widget-header icon="terminal" feather-icon="true" title-text="Attach"></rd-widget-header>
<rd-widget-body>
<div class="small text-warning" ng-if="!container.Config.OpenStdin">
<p>

6
app/docker/views/containers/console/containerConsoleController.js
View File

@ -242,5 +242,11 @@ angular.module('portainer.docker').controller('ContainerConsoleController', [
Notifications.error('Error', err, 'Unable to retrieve container details');
});
};
$scope.handleIsCustomCommandChange = function (enabled) {
$scope.$evalAsync(() => {
$scope.formValues.isCustomCommand = enabled;
});
};
},
]);

10
app/docker/views/containers/console/exec.html
View File

@ -13,7 +13,7 @@
<div class="row" ng-init="initView()" ng-show="loaded">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-terminal" title-text="Execute"></rd-widget-header>
<rd-widget-header icon="terminal" feather-icon="true" title-text="Execute"></rd-widget-header>
<rd-widget-body>
<form class="form-horizontal">
<div ng-if="state === states.disconnected">
@ -40,8 +40,12 @@
</div>
<!-- !command-list -->
<div class="form-group col-lg-12">
<label for="command" class="text-left control-label">Use custom command</label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="formValues.isCustomCommand" /><i></i> </label>
<por-switch-field
label-class="'col-sm-2'"
checked="formValues.isCustomCommand"
label="'Use custom command'"
on-change="(handleIsCustomCommandChange)"
></por-switch-field>
</div>
<div class="form-group">
<label class="col-lg-1 text-left col-sm-2 control-label">

6
app/docker/views/containers/inspect/containerinspect.html
View File

@ -13,10 +13,10 @@
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-header icon="fa-circle" title-text="Inspect">
<rd-widget-header icon="circle" feather-icon="true" title-text="Inspect">
<span class="btn-group btn-group-sm">
<label class="btn btn-primary" ng-model="state.DisplayTextView" uib-btn-radio="false"><i class="fa fa-code space-right" aria-hidden="true"></i>Tree</label>
<label class="btn btn-primary" ng-model="state.DisplayTextView" uib-btn-radio="true"><i class="fa fa-file-alt space-right" aria-hidden="true"></i>Text</label>
<label class="btn btn-light" ng-model="state.DisplayTextView" uib-btn-radio="false"><pr-icon icon="'code'" feather="true"></pr-icon>Tree</label>
<label class="btn btn-light" ng-model="state.DisplayTextView" uib-btn-radio="true"><pr-icon icon="'file'" feather="true"></pr-icon>Text</label>
</span>
</rd-widget-header>
<rd-widget-body>

12
app/docker/views/containers/stats/containerstats.html
View File

@ -13,7 +13,7 @@
<div class="row">
<div class="col-md-12">
<rd-widget>
<rd-widget-header icon="fa-info-circle" title-text="About statistics"> </rd-widget-header>
<rd-widget-header icon="info" feather-icon="true" title-text="About statistics"> </rd-widget-header>
<rd-widget-body>
<form class="form-horizontal">
<div class="form-group">
@ -59,7 +59,7 @@
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<rd-widget>
<rd-widget-header icon="fa-chart-area" title-text="Memory usage"></rd-widget-header>
<rd-widget-header icon="bar-chart" feather-icon="true" title-text="Memory usage"></rd-widget-header>
<rd-widget-body>
<div class="chart-container" style="position: relative">
<canvas id="memoryChart" width="770" height="300"></canvas>
@ -70,7 +70,7 @@
<div class="col-lg-6 col-md-6 col-sm-12">
<rd-widget>
<rd-widget-header icon="fa-chart-area" title-text="CPU usage"></rd-widget-header>
<rd-widget-header icon="bar-chart" feather-icon="true" title-text="CPU usage"></rd-widget-header>
<rd-widget-body>
<div class="chart-container" style="position: relative">
<canvas id="cpuChart" width="770" height="300"></canvas>
@ -81,7 +81,7 @@
<div class="col-lg-6 col-md-6 col-sm-12" ng-if="!state.networkStatsUnavailable">
<rd-widget>
<rd-widget-header icon="fa-chart-area" title-text="Network usage (aggregate)"></rd-widget-header>
<rd-widget-header icon="bar-chart" feather-icon="true" title-text="Network usage (aggregate)"></rd-widget-header>
<rd-widget-body>
<div class="chart-container" style="position: relative">
<canvas id="networkChart" width="770" height="300"></canvas>
@ -92,7 +92,7 @@
<div class="col-lg-6 col-md-6 col-sm-12" ng-if="!state.ioStatsUnavailable">
<rd-widget>
<rd-widget-header icon="fa-chart-area" title-text="I/O usage (aggregate)"></rd-widget-header>
<rd-widget-header icon="bar-chart" feather-icon="true" title-text="I/O usage (aggregate)"></rd-widget-header>
<rd-widget-body>
<div class="chart-container" style="position: relative">
<canvas id="ioChart" width="770" height="300"></canvas>
@ -106,7 +106,7 @@
<div class="col-sm-12">
<container-processes-datatable
title-text="Processes"
title-icon="fa-tasks"
title-icon="list"
dataset="processInfo.Processes"
headerset="processInfo.Titles"
table-key="container-processes"

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

@ -1,6 +1,7 @@
import { useReducer } from 'react';
import { useUser } from '@/portainer/hooks/useUser';
import { Icon } from '@/react/components/Icon';
import { r2a } from '@/react-tools/react2angular';
import { TeamMembership, Role } from '@/portainer/teams/types';
import { useUserMembership } from '@/portainer/users/queries';
@ -57,7 +58,7 @@ export function AccessControlPanel({
<div className="row">
<div>
<Button color="link" onClick={toggleEditMode}>
<i className="fa fa-edit space-right" aria-hidden="true" />
<Icon icon="edit" className="space-right" feather />
Change ownership
</Button>
</div>

2
app/portainer/components/datatables/groups-datatable/groupsDatatable.html
View File

@ -62,7 +62,7 @@
<a ui-sref="portainer.groups.group({id: item.Id})">{{ item.Name }}</a>
</td>
<td>
<a ui-sref="portainer.groups.group.access({id: item.Id})"> <i class="fa fa-users" aria-hidden="true"></i> Manage access </a>
<a ui-sref="portainer.groups.group.access({id: item.Id})"> <pr-icon icon="'users'" feather="true"></pr-icon> Manage access </a>
</td>
</tr>
<tr ng-if="!$ctrl.dataset">

8
app/portainer/components/datatables/registries-datatable/registriesDatatable.html
View File

@ -13,10 +13,10 @@
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
placeholder="Search for a registry..."
auto-focus
ng-model-options="{ debounce: 300 }"
data-cy="volume-searchInput"
data-cy="registry-searchInput"
/>
</div>
<div class="actionBar !gap-3" ng-if="$ctrl.isAdmin">
@ -89,9 +89,9 @@
{{ item.URL }}
</td>
<td>
<a ng-if="$ctrl.canManageAccess(item)" ng-click="$ctrl.redirectToManageAccess(item)"> <i class="fa fa-users" aria-hidden="true"></i> Manage access </a>
<a ng-if="$ctrl.canManageAccess(item)" ng-click="$ctrl.redirectToManageAccess(item)"> <pr-icon icon="'users'" feather="true"></pr-icon> Manage access </a>
<be-feature-indicator feature="$ctrl.limitedFeature" ng-if="$ctrl.canBrowse(item)">
<span class="text-muted space-left" style="padding-right: 5px"> <i class="fa fa-search" aria-hidden="true"></i> Browse</span>
<span class="text-muted space-left" style="padding-right: 5px"> <pr-icon icon="'search'" feather="true"></pr-icon> Browse </span>
</be-feature-indicator>
<span ng-if="!$ctrl.canBrowse(item) && !$ctrl.canManageAccess(item)"> - </span>

4
app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
View File

@ -34,10 +34,10 @@
>{{ item.TeamName ? 'Team' : 'User' }} <code ng-if="item.TeamName">{{ item.TeamName }}</code> access defined on {{ item.AccessLocation }}
<code ng-if="item.GroupName">{{ item.GroupName }}</code>
<a ng-if="!item.GroupName && $ctrl.isAdmin" ui-sref="portainer.endpoints.endpoint.access({id: item.EndpointId})"
><i style="margin-left: 5px" class="fa fa-users" aria-hidden="true"></i> Manage access
><pr-icon icon="'users'" feather="true"></pr-icon> Manage access
</a>
<a ng-if="item.GroupName && $ctrl.isAdmin" ui-sref="portainer.groups.group.access({id: item.GroupId})"
><i style="margin-left: 5px" class="fa fa-users" aria-hidden="true"></i> Manage access
><pr-icon icon="'users'" feather="true"></pr-icon> Manage access
</a>
</td>
</tr>

6
app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
View File

@ -141,7 +141,11 @@ export function ContainersDatatable({
return (
<TableContainer>
<TableTitle icon="box" featherIcon label="Containers">
<SearchBar value={searchBarValue} onChange={handleSearchBarChange} />
<SearchBar
value={searchBarValue}
onChange={handleSearchBarChange}
placeholder="Search for a container..."
/>
<TableActions>
<ContainersDatatableActions
selectedItems={selectedFlatRows.map((row) => row.original)}

11
app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
View File

@ -2,6 +2,7 @@ import clsx from 'clsx';
import { DockerContainerStatus } from '@/react/docker/containers/types';
import { Authorized } from '@/portainer/hooks/useUser';
import { Icon } from '@/react/components/Icon';
import { react2angular } from '@/react-tools/react2angular';
import { Link } from '@@/Link';
@ -48,7 +49,7 @@ export function ContainerQuickActions({
params={{ id: containerId, nodeName }}
title="Logs"
>
<i className="fa fa-file-alt space-right" aria-hidden="true" />
<Icon icon="file-text" feather className="space-right" />
</Link>
</Authorized>
)}
@ -60,7 +61,7 @@ export function ContainerQuickActions({
params={{ id: containerId, nodeName }}
title="Inspect"
>
<i className="fa fa-info-circle space-right" aria-hidden="true" />
<Icon icon="info" feather className="space-right" />
</Link>
</Authorized>
)}
@ -72,7 +73,7 @@ export function ContainerQuickActions({
params={{ id: containerId, nodeName }}
title="Stats"
>
<i className="fa fa-chart-area space-right" aria-hidden="true" />
<Icon icon="bar-chart" feather className="space-right" />
</Link>
</Authorized>
)}
@ -84,7 +85,7 @@ export function ContainerQuickActions({
params={{ id: containerId, nodeName }}
title="Exec Console"
>
<i className="fa fa-terminal space-right" aria-hidden="true" />
<Icon icon="terminal" feather className="space-right" />
</Link>
</Authorized>
)}
@ -96,7 +97,7 @@ export function ContainerQuickActions({
params={{ id: containerId, nodeName }}
title="Attach Console"
>
<i className="fa fa-plug space-right" aria-hidden="true" />
<Icon icon="paperclip" feather className="space-right" />
</Link>
</Authorized>
)}