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

refactor(containers): replace containers datatable with react component [EE-1815] (#6059)

pull/6355/head
Chaim Lev-Ari 2022-01-04 14:16:09 +02:00 committed by GitHub
parent 65821aaccc
commit 07e7fbd270
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
80 changed files with 3614 additions and 1084 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.yml
View File

@ -88,6 +88,8 @@ overrides:
'jsx-a11y/label-has-associated-control': ['error', { 'assert': 'either' }]
'react/function-component-definition': ['error', { 'namedComponents': 'function-declaration' }]
'react/jsx-no-bind': off
'no-await-in-loop': 'off'
'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }]
- files:
- app/**/*.test.*
extends:

11
app/assets/css/app.css
View File

@ -82,6 +82,13 @@ input[type='checkbox'] {
margin-top: -1px;
}
.md-checkbox input[type='checkbox']:indeterminate + label:before {
content: '-';
align-content: center;
line-height: 16px;
text-align: center;
}
a[ng-click] {
cursor: pointer;
}
@ -885,3 +892,7 @@ json-tree .branch-preview {
word-break: break-all;
white-space: normal;
}
.space-x-1 {
margin-left: 0.25rem;
}

1
app/assets/css/index.js
View File

@ -13,6 +13,7 @@ import 'angular-loading-bar/build/loading-bar.css';
import 'angular-moment-picker/dist/angular-moment-picker.min.css';
import 'angular-multiselect/isteven-multi-select.css';
import 'spinkit/spinkit.min.css';
import '@reach/menu-button/styles.css';
import './rdash.css';
import './app.css';

6
app/docker/__module.js
View File

@ -1,4 +1,8 @@
angular.module('portainer.docker', ['portainer.app']).config([
import angular from 'angular';
import containersModule from './containers';
angular.module('portainer.docker', ['portainer.app', containersModule]).config([
'$stateRegistryProvider',
function ($stateRegistryProvider) {
'use strict';

3
app/docker/components/container-quick-actions/ContainerQuickActions.module.css Normal file
View File

@ -0,0 +1,3 @@
.root {
display: inline-flex;
}

140
app/docker/components/container-quick-actions/ContainerQuickActions.tsx Normal file
View File

@ -0,0 +1,140 @@
import clsx from 'clsx';
import { Authorized } from '@/portainer/hooks/useUser';
import { Link } from '@/portainer/components/Link';
import { react2angular } from '@/react-tools/react2angular';
import { DockerContainerStatus } from '@/docker/containers/types';
import styles from './ContainerQuickActions.module.css';
interface QuickActionsState {
showQuickActionAttach: boolean;
showQuickActionExec: boolean;
showQuickActionInspect: boolean;
showQuickActionLogs: boolean;
showQuickActionStats: boolean;
}
interface Props {
taskId?: string;
containerId?: string;
nodeName: string;
state: QuickActionsState;
status: DockerContainerStatus;
}
export function ContainerQuickActions({
taskId,
containerId,
nodeName,
state,
status,
}: Props) {
if (taskId) {
return <TaskQuickActions taskId={taskId} state={state} />;
}
const isActive = ['starting', 'running', 'healthy', 'unhealthy'].includes(
status
);
return (
<div className={clsx('space-x-1', styles.root)}>
{state.showQuickActionLogs && (
<Authorized authorizations="DockerContainerLogs">
<Link
to="docker.containers.container.logs"
params={{ id: containerId, nodeName }}
title="Logs"
>
<i className="fa fa-file-alt space-right" aria-hidden="true" />
</Link>
</Authorized>
)}
{state.showQuickActionInspect && (
<Authorized authorizations="DockerContainerInspect">
<Link
to="docker.containers.container.inspect"
params={{ id: containerId, nodeName }}
title="Inspect"
>
<i className="fa fa-info-circle space-right" aria-hidden="true" />
</Link>
</Authorized>
)}
{state.showQuickActionStats && isActive && (
<Authorized authorizations="DockerContainerStats">
<Link
to="docker.containers.container.stats"
params={{ id: containerId, nodeName }}
title="Stats"
>
<i className="fa fa-chart-area space-right" aria-hidden="true" />
</Link>
</Authorized>
)}
{state.showQuickActionExec && isActive && (
<Authorized authorizations="DockerExecStart">
<Link
to="docker.containers.container.exec"
params={{ id: containerId, nodeName }}
title="Exec Console"
>
<i className="fa fa-terminal space-right" aria-hidden="true" />
</Link>
</Authorized>
)}
{state.showQuickActionAttach && isActive && (
<Authorized authorizations="DockerContainerAttach">
<Link
to="docker.containers.container.attach"
params={{ id: containerId, nodeName }}
title="Attach Console"
>
<i className="fa fa-plug space-right" aria-hidden="true" />
</Link>
</Authorized>
)}
</div>
);
}
interface TaskProps {
taskId: string;
state: QuickActionsState;
}
function TaskQuickActions({ taskId, state }: TaskProps) {
return (
<div className={clsx('space-x-1', styles.root)}>
{state.showQuickActionLogs && (
<Authorized authorizations="DockerTaskLogs">
<Link
to="docker.tasks.task.logs"
params={{ id: taskId }}
title="Logs"
>
<i className="fa fa-file-alt space-right" aria-hidden="true" />
</Link>
</Authorized>
)}
{state.showQuickActionInspect && (
<Authorized authorizations="DockerTaskInspect">
<Link to="docker.tasks.task" params={{ id: taskId }} title="Inspect">
<i className="fa fa-info-circle space-right" aria-hidden="true" />
</Link>
</Authorized>
)}
</div>
);
}
export const ContainerQuickActionsAngular = react2angular(
ContainerQuickActions,
['taskId', 'containerId', 'nodeName', 'state', 'status']
);

65
app/docker/components/container-quick-actions/containerQuickActions.html
View File

@ -1,65 +0,0 @@
<div class="btn-group btn-group-xs" role="group" aria-label="..." style="display: inline-flex;">
<a
authorization="DockerContainerLogs"
ng-if="$ctrl.state.showQuickActionLogs && $ctrl.taskId === undefined"
style="margin: 0 2.5px;"
ui-sref="docker.containers.container.logs({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
title="Logs"
>
<i class="fa fa-file-alt space-right" aria-hidden="true"></i>
</a>
<a
authorization="DockerTaskLogs"
ng-if="$ctrl.state.showQuickActionLogs && $ctrl.taskId !== undefined"
style="margin: 0 2.5px;"
ui-sref="docker.tasks.task.logs({id: $ctrl.taskId})"
title="Logs"
>
<i class="fa fa-file-alt space-right" aria-hidden="true"></i>
</a>
<a
authorization="DockerContainerInspect"
ng-if="$ctrl.state.showQuickActionInspect && $ctrl.taskId === undefined"
style="margin: 0 2.5px;"
ui-sref="docker.containers.container.inspect({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
title="Inspect"
>
<i class="fa fa-info-circle space-right" aria-hidden="true"></i>
</a>
<a
authorization="DockerTaskInspect"
ng-if="$ctrl.state.showQuickActionInspect && $ctrl.taskId !== undefined"
style="margin: 0 2.5px;"
ui-sref="docker.tasks.task({id: $ctrl.taskId})"
title="Inspect"
>
<i class="fa fa-info-circle space-right" aria-hidden="true"></i>
</a>
<a
authorization="DockerContainerStats"
ng-if="$ctrl.state.showQuickActionStats && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
style="margin: 0 2.5px;"
ui-sref="docker.containers.container.stats({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
title="Stats"
>
<i class="fa fa-chart-area space-right" aria-hidden="true"></i>
</a>
<a
authorization="DockerExecStart"
ng-if="$ctrl.state.showQuickActionExec && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
style="margin: 0 2.5px;"
ui-sref="docker.containers.container.exec({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
title="Exec Console"
>
<i class="fa fa-terminal space-right" aria-hidden="true"></i>
</a>
<a
authorization="DockerContainerAttach"
ng-if="$ctrl.state.showQuickActionAttach && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
style="margin: 0 2.5px;"
ui-sref="docker.containers.container.attach({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
title="Attach Console"
>
<i class="fa fa-plug space-right" aria-hidden="true"></i>
</a>
</div>

10
app/docker/components/container-quick-actions/containerQuickActions.js
View File

@ -1,10 +0,0 @@
angular.module('portainer.docker').component('containerQuickActions', {
templateUrl: './containerQuickActions.html',
bindings: {
containerId: '<',
nodeName: '<',
status: '<',
state: '<',
taskId: '<',
},
});

7
app/docker/components/container-quick-actions/index.ts Normal file
View File

@ -0,0 +1,7 @@
import angular from 'angular';
import { ContainerQuickActionsAngular } from './ContainerQuickActions';
angular
.module('portainer.docker')
.component('containerQuickActions', ContainerQuickActionsAngular);

73
app/docker/components/datatables/containers-datatable/actions/containersDatatableActions.html
View File

@ -1,73 +0,0 @@
<div
class="actionBar"
authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate"
>
<div class="btn-group" role="group" aria-label="...">
<button
authorization="DockerContainerStart"
type="button"
class="btn btn-sm btn-success"
ng-click="$ctrl.startAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noStoppedItemsSelected"
>
<i class="fa fa-play space-right" aria-hidden="true"></i>Start
</button>
<button
authorization="DockerContainerStop"
type="button"
class="btn btn-sm btn-danger"
ng-click="$ctrl.stopAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected"
>
<i class="fa fa-stop space-right" aria-hidden="true"></i>Stop
</button>
<button
authorization="DockerContainerKill"
type="button"
class="btn btn-sm btn-danger"
ng-click="$ctrl.killAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0"
>
<i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill
</button>
<button
authorization="DockerContainerRestart"
type="button"
class="btn btn-sm btn-primary"
ng-click="$ctrl.restartAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0"
>
<i class="fa fa-sync space-right" aria-hidden="true"></i>Restart
</button>
<button
authorization="DockerContainerPause"
type="button"
class="btn btn-sm btn-primary"
ng-click="$ctrl.pauseAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected"
>
<i class="fa fa-pause space-right" aria-hidden="true"></i>Pause
</button>
<button
authorization="DockerContainerUnpause"
type="button"
class="btn btn-sm btn-primary"
ng-click="$ctrl.resumeAction($ctrl.selectedItems)"
ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noPausedItemsSelected"
>
<i class="fa fa-play space-right" aria-hidden="true"></i>Resume
</button>
<button
authorization="DockerContainerDelete"
type="button"
class="btn btn-sm btn-danger"
ng-disabled="$ctrl.selectedItemCount === 0"
ng-click="$ctrl.removeAction($ctrl.selectedItems)"
>
<i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
</button>
</div>
<button authorization="DockerContainerCreate" type="button" class="btn btn-sm btn-primary" ui-sref="docker.containers.new" ng-if="$ctrl.showAddAction">
<i class="fa fa-plus space-right" aria-hidden="true"></i>Add container
</button>
</div>

12
app/docker/components/datatables/containers-datatable/actions/containersDatatableActions.js
View File

@ -1,12 +0,0 @@
angular.module('portainer.docker').component('containersDatatableActions', {
templateUrl: './containersDatatableActions.html',
controller: 'ContainersDatatableActionsController',
bindings: {
selectedItems: '=',
selectedItemCount: '=',
noStoppedItemsSelected: '=',
noRunningItemsSelected: '=',
noPausedItemsSelected: '=',
showAddAction: '<',
},
});

112
app/docker/components/datatables/containers-datatable/actions/containersDatatableActionsController.js
View File

@ -1,112 +0,0 @@
angular.module('portainer.docker').controller('ContainersDatatableActionsController', [
'$state',
'ContainerService',
'ModalService',
'Notifications',
'HttpRequestHelper',
function ($state, ContainerService, ModalService, Notifications, HttpRequestHelper) {
this.startAction = function (selectedItems) {
var successMessage = 'Container successfully started';
var errorMessage = 'Unable to start container';
executeActionOnContainerList(selectedItems, ContainerService.startContainer, successMessage, errorMessage);
};
this.stopAction = function (selectedItems) {
var successMessage = 'Container successfully stopped';
var errorMessage = 'Unable to stop container';
executeActionOnContainerList(selectedItems, ContainerService.stopContainer, successMessage, errorMessage);
};
this.restartAction = function (selectedItems) {
var successMessage = 'Container successfully restarted';
var errorMessage = 'Unable to restart container';
executeActionOnContainerList(selectedItems, ContainerService.restartContainer, successMessage, errorMessage);
};
this.killAction = function (selectedItems) {
var successMessage = 'Container successfully killed';
var errorMessage = 'Unable to kill container';
executeActionOnContainerList(selectedItems, ContainerService.killContainer, successMessage, errorMessage);
};
this.pauseAction = function (selectedItems) {
var successMessage = 'Container successfully paused';
var errorMessage = 'Unable to pause container';
executeActionOnContainerList(selectedItems, ContainerService.pauseContainer, successMessage, errorMessage);
};
this.resumeAction = function (selectedItems) {
var successMessage = 'Container successfully resumed';
var errorMessage = 'Unable to resume container';
executeActionOnContainerList(selectedItems, ContainerService.resumeContainer, successMessage, errorMessage);
};
this.removeAction = function (selectedItems) {
var isOneContainerRunning = false;
for (var i = 0; i < selectedItems.length; i++) {
var container = selectedItems[i];
if (container.State === 'running') {
isOneContainerRunning = true;
break;
}
}
var title = 'You are about to remove one or more container.';
if (isOneContainerRunning) {
title = 'You are about to remove one or more running container.';
}
ModalService.confirmContainerDeletion(title, function (result) {
if (!result) {
return;
}
var cleanVolumes = false;
if (result[0]) {
cleanVolumes = true;
}
removeSelectedContainers(selectedItems, cleanVolumes);
});
};
function executeActionOnContainerList(containers, action, successMessage, errorMessage) {
var actionCount = containers.length;
angular.forEach(containers, function (container) {
HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
action(container.Id)
.then(function success() {
Notifications.success(successMessage, container.Names[0]);
})
.catch(function error(err) {
errorMessage = errorMessage + ':' + container.Names[0];
Notifications.error('Failure', err, errorMessage);
})
.finally(function final() {
--actionCount;
if (actionCount === 0) {
$state.reload();
}
});
});
}
function removeSelectedContainers(containers, cleanVolumes) {
var actionCount = containers.length;
angular.forEach(containers, function (container) {
HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
ContainerService.remove(container, cleanVolumes)
.then(function success() {
Notifications.success('Container successfully removed', container.Names[0]);
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to remove container');
})
.finally(function final() {
--actionCount;
if (actionCount === 0) {
$state.reload();
}
});
});
}
},
]);

312
app/docker/components/datatables/containers-datatable/containersDatatable.html
View File

@ -1,312 +0,0 @@
<div class="datatable">
<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="settings">
<datatable-columns-visibility columns="$ctrl.columnVisibility.columns" on-change="($ctrl.onColumnVisibilityChange)"></datatable-columns-visibility>
<span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
<span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader">
Table settings
</div>
<div class="menuContent">
<div class="md-checkbox">
<input id="setting_container_trunc" type="checkbox" ng-model="$ctrl.settings.truncateContainerName" ng-change="$ctrl.onSettingsContainerNameTruncateChange()" />
<label for="setting_container_trunc">Truncate container name</label>
</div>
<div>
<div class="md-checkbox">
<input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
<label for="setting_auto_refresh">Auto refresh</label>
</div>
<div ng-if="$ctrl.settings.repeater.autoRefresh">
<label for="settings_refresh_rate">
Refresh rate
</label>
<select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
<option value="10">10s</option>
<option value="30">30s</option>
<option value="60">1min</option>
<option value="120">2min</option>
<option value="300">5min</option>
</select>
<span>
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
</span>
</div>
</div>
</div>
<div authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs, DockerContainerAttach">
<div class="menuHeader">
Quick actions
</div>
<div class="menuContent">
<div class="md-checkbox" authorization="DockerContainerStats">
<input id="setting_show_stats" type="checkbox" ng-model="$ctrl.settings.showQuickActionStats" ng-change="$ctrl.onSettingsQuickActionChange()" />
<label for="setting_show_stats">Stats</label>
</div>
<div class="md-checkbox" authorization="DockerContainerLogs">
<input id="setting_show_logs" type="checkbox" ng-model="$ctrl.settings.showQuickActionLogs" ng-change="$ctrl.onSettingsQuickActionChange()" />
<label for="setting_show_logs">Logs</label>
</div>
<div class="md-checkbox" authorization="DockerExecStart">
<input id="setting_show_console" type="checkbox" ng-model="$ctrl.settings.showQuickActionExec" ng-change="$ctrl.onSettingsQuickActionChange()" />
<label for="setting_show_console">Console</label>
</div>
<div class="md-checkbox" authorization="DockerContainerInspect">
<input id="setting_show_inspect" type="checkbox" ng-model="$ctrl.settings.showQuickActionInspect" ng-change="$ctrl.onSettingsQuickActionChange()" />
<label for="setting_show_inspect">Inspect</label>
</div>
<div class="md-checkbox" authorization="DockerContainerAttach">
<input id="setting_show_attach" type="checkbox" ng-model="$ctrl.settings.showQuickActionAttach" ng-change="$ctrl.onSettingsQuickActionChange()" />
<label for="setting_show_attach">Attach</label>
</div>
</div>
</div>
<div>
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
</div>
</div>
</div>
</span>
</div>
</div>
<containers-datatable-actions
ng-if="!$ctrl.offlineMode"
selected-items="$ctrl.state.selectedItems"
selected-item-count="$ctrl.state.selectedItemCount"
no-stopped-items-selected="$ctrl.state.noStoppedItemsSelected"
no-running-items-selected="$ctrl.state.noRunningItemsSelected"
no-paused-items-selected="$ctrl.state.noPausedItemsSelected"
show-add-action="$ctrl.showAddAction"
></containers-datatable-actions>
<div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input
type="text"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
focus-if="!$ctrl.notAutoFocus"
ng-model-options="{ debounce: 300 }"
/>
</div>
<div class="table-responsive">
<table class="table table-hover table-filters nowrap-cells">
<thead>
<tr>
<th>
<span
class="md-checkbox"
ng-if="!$ctrl.offlineMode"
authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate"
>
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
<label for="select_all"></label>
</span>
<a ng-click="$ctrl.changeOrderBy('Names')">
Name
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Names' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Names' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" ng-show="$ctrl.columnVisibility.columns.state.display">
<a ng-click="$ctrl.changeOrderBy('Status')">
State
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i>
</a>
<div>
<span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled">Filter <i class="fa fa-filter" aria-hidden="true"></i></span>
<span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter <i class="fa fa-check" aria-hidden="true"></i></span>
</div>
<div class="dropdown-menu" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader">
Filter by state
</div>
<div class="menuContent">
<div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
<input id="filter_state_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
<label for="filter_state_{{ $index }}">{{ filter.label }}</label>
</div>
</div>
<div>
<a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
</div>
</div>
</div>
</th>
<th
ng-if="
$ctrl.settings.showQuickActionStats ||
$ctrl.settings.showQuickActionLogs ||
$ctrl.settings.showQuickActionExec ||
$ctrl.settings.showQuickActionAttach ||
$ctrl.settings.showQuickActionInspect
"
ng-show="$ctrl.columnVisibility.columns.actions.display"
authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs, DockerContainerAttach"
>
Quick actions
</th>
<th ng-show="$ctrl.columnVisibility.columns.stack.display">
<a ng-click="$ctrl.changeOrderBy('StackName')">
Stack
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th ng-show="$ctrl.columnVisibility.columns.image.display">
<a ng-click="$ctrl.changeOrderBy('Image')">
Image
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th ng-show="$ctrl.columnVisibility.columns.created.display">
<a ng-click="$ctrl.changeOrderBy('Created')">
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"></i>
Created
</a>
</th>
<th ng-show="$ctrl.columnVisibility.columns.ip.display">
<a ng-click="$ctrl.changeOrderBy('IP')">
IP Address
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th ng-if="$ctrl.showHostColumn" ng-show="$ctrl.columnVisibility.columns.host.display">
<a ng-click="$ctrl.changeOrderBy('NodeName')">
Host
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th ng-show="$ctrl.columnVisibility.columns.ports.display">
<a ng-click="$ctrl.changeOrderBy('Ports')">
Published Ports
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Ports' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Ports' && $ctrl.state.reverseOrder"></i>
</a>
</th>
<th ng-show="$ctrl.columnVisibility.columns.ownership.display">
<a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
Ownership
<i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></i>
<i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></i>
</a>
</th>
</tr>
</thead>
<tbody>
<tr
dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
ng-class="{ active: item.Checked }"
>
<td>
<span
class="md-checkbox"
ng-if="!$ctrl.offlineMode"
authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate"
>
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" ng-disabled="!$ctrl.allowSelection(item)" />
<label for="select_{{ $index }}"></label>
</span>
<a ng-if="!$ctrl.offlineMode" ui-sref="docker.containers.container({ id: item.Id, nodeName: item.NodeName })" title="{{ item | containername }}">{{
item | containername | truncate: $ctrl.settings.containerNameTruncateSize
}}</a>
<span ng-if="$ctrl.offlineMode">{{ item | containername | truncate: $ctrl.settings.containerNameTruncateSize }}</span>
</td>
<td ng-show="$ctrl.columnVisibility.columns.state.display">
<span
ng-if="['starting', 'healthy', 'unhealthy'].indexOf(item.Status) !== -1"
class="label label-{{ item.Status | containerstatusbadge }} interactive"
uib-tooltip="This container has a health check"
>{{ item.Status }}</span
>
<span ng-if="['starting', 'healthy', 'unhealthy'].indexOf(item.Status) === -1" class="label label-{{ item.Status | containerstatusbadge }}">{{ item.Status }}</span>
</td>
<td
ng-if="
!$ctrl.offlineMode &&
($ctrl.settings.showQuickActionStats ||
$ctrl.settings.showQuickActionLogs ||
$ctrl.settings.showQuickActionExec ||
$ctrl.settings.showQuickActionAttach ||
$ctrl.settings.showQuickActionInspect)
"
ng-show="$ctrl.columnVisibility.columns.actions.display"
authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs"
>
<container-quick-actions container-id="item.Id" node-name="item.NodeName" status="item.Status" state="$ctrl.settings"></container-quick-actions>
</td>
<td ng-if="$ctrl.offlineMode"> </td>
<td ng-show="$ctrl.columnVisibility.columns.stack.display">{{ item.StackName ? item.StackName : '-' }}</td>
<td ng-show="$ctrl.columnVisibility.columns.image.display">
<a ng-if="!$ctrl.offlineMode" ui-sref="docker.images.image({ id: item.Image })">{{ item.Image | trimshasum }}</a>
<span ng-if="$ctrl.offlineMode">{{ item.Image | trimshasum }}</span>
</td>
<td ng-show="$ctrl.columnVisibility.columns.created.display">
{{ item.Created | getisodatefromtimestamp }}
</td>
<td ng-show="$ctrl.columnVisibility.columns.ip.display">{{ item.IP ? item.IP : '-' }}</td>
<td ng-if="$ctrl.showHostColumn" ng-show="$ctrl.columnVisibility.columns.host.display">{{ item.NodeName ? item.NodeName : '-' }}</td>
<td ng-show="$ctrl.columnVisibility.columns.ports.display">
<a
ng-if="item.Ports.length > 0"
ng-repeat="p in item.Ports | unique: 'public'"
class="image-tag"
ng-href="http://{{ $ctrl.endpointPublicUrl || p.host }}:{{ p.public }}"
target="_blank"
>
<i class="fa fa-external-link-alt" aria-hidden="true"></i> {{ p.public }}:{{ p.private }}
</a>
<span ng-if="item.Ports.length == 0">-</span>
</td>
<td ng-show="$ctrl.columnVisibility.columns.ownership.display">
<span>
<i ng-class="item.ResourceControl.Ownership | ownershipicon" aria-hidden="true"></i>
{{ item.ResourceControl.Ownership ? item.ResourceControl.Ownership : item.ResourceControl.Ownership = $ctrl.RCO.ADMINISTRATORS }}
</span>
</td>
</tr>
<tr ng-if="!$ctrl.dataset">
<td colspan="9" class="text-center text-muted">Loading...</td>
</tr>
<tr ng-if="$ctrl.state.filteredDataSet.length === 0">
<td colspan="9" class="text-center text-muted">No container available.</td>
</tr>
</tbody>
</table>
</div>
<div class="footer" ng-if="$ctrl.dataset">
<div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
<div class="paginationControls">
<form class="form-inline">
<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>

18
app/docker/components/datatables/containers-datatable/containersDatatable.js
View File

@ -1,18 +0,0 @@
angular.module('portainer.docker').component('containersDatatable', {
templateUrl: './containersDatatable.html',
controller: 'ContainersDatatableController',
bindings: {
titleText: '@',
titleIcon: '@',
dataset: '<',
tableKey: '@',
orderBy: '@',
reverseOrder: '<',
showHostColumn: '<',
showAddAction: '<',
offlineMode: '<',
refreshCallback: '<',
notAutoFocus: '<',
endpointPublicUrl: '<',
},
});

210
app/docker/components/datatables/containers-datatable/containersDatatableController.js
View File

@ -1,210 +0,0 @@
import _ from 'lodash-es';
angular.module('portainer.docker').controller('ContainersDatatableController', [
'$scope',
'$controller',
'DatatableService',
function ($scope, $controller, DatatableService) {
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
var ctrl = this;
this.state = Object.assign(this.state, {
noStoppedItemsSelected: true,
noRunningItemsSelected: true,
noPausedItemsSelected: true,
});
this.settings = Object.assign(this.settings, {
truncateContainerName: true,
containerNameTruncateSize: 32,
showQuickActionStats: true,
showQuickActionLogs: true,
showQuickActionExec: true,
showQuickActionInspect: true,
showQuickActionAttach: false,
});
this.filters = {
state: {
open: false,
enabled: false,
values: [],
},
};
this.columnVisibility = {
columns: {
state: {
label: 'State',
display: true,
},
actions: {
label: 'Quick Actions',
display: true,
},
stack: {
label: 'Stack',
display: true,
},
image: {
label: 'Image',
display: true,
},
created: {
label: 'Created',
display: true,
},
ip: {
label: 'IP Address',
display: true,
},
host: {
label: 'Host',
display: true,
},
ports: {
label: 'Published Ports',
display: true,
},
ownership: {
label: 'Ownership',
display: true,
},
},
};
this.allowSelection = function (item) {
return !item.IsPortainer;
};
this.onColumnVisibilityChange = onColumnVisibilityChange.bind(this);
function onColumnVisibilityChange(columns) {
this.columnVisibility.columns = columns;
DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
}
this.onSelectionChanged = function () {
this.updateSelectionState();
};
this.updateSelectionState = function () {
this.state.noStoppedItemsSelected = true;
this.state.noRunningItemsSelected = true;
this.state.noPausedItemsSelected = true;
for (var i = 0; i < this.dataset.length; i++) {
var item = this.dataset[i];
if (item.Checked) {
this.updateSelectionStateBasedOnItemStatus(item);
}
}
};
this.updateSelectionStateBasedOnItemStatus = function (item) {
if (item.Status === 'paused') {
this.state.noPausedItemsSelected = false;
} else if (['stopped', 'created'].indexOf(item.Status) !== -1) {
this.state.noStoppedItemsSelected = false;
} else if (['running', 'healthy', 'unhealthy', 'starting'].indexOf(item.Status) !== -1) {
this.state.noRunningItemsSelected = false;
}
};
this.applyFilters = function (value) {
var container = value;
var filters = ctrl.filters;
for (var i = 0; i < filters.state.values.length; i++) {
var filter = filters.state.values[i];
if (container.Status === filter.label && filter.display) {
return true;
}
}
return false;
};
this.onStateFilterChange = function () {
var filters = this.filters.state.values;
var filtered = false;
for (var i = 0; i < filters.length; i++) {
var filter = filters[i];
if (!filter.display) {
filtered = true;
}
}
this.filters.state.enabled = filtered;
};
this.onSettingsContainerNameTruncateChange = function () {
if (this.settings.truncateContainerName) {
this.settings.containerNameTruncateSize = 32;
} else {
this.settings.containerNameTruncateSize = 256;
}
DatatableService.setDataTableSettings(this.tableKey, this.settings);
};
this.onSettingsQuickActionChange = function () {
DatatableService.setDataTableSettings(this.tableKey, this.settings);
};
this.prepareTableFromDataset = function () {
var availableStateFilters = [];
for (var i = 0; i < this.dataset.length; i++) {
var item = this.dataset[i];
availableStateFilters.push({ label: item.Status, display: true });
}
this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
};
this.updateStoredFilters = function (storedFilters) {
var datasetFilters = this.filters.state.values;
for (var i = 0; i < datasetFilters.length; i++) {
var filter = datasetFilters[i];
var existingFilter = _.find(storedFilters, ['label', filter.label]);
if (existingFilter && !existingFilter.display) {
filter.display = existingFilter.display;
this.filters.state.enabled = true;
}
}
};
this.$onInit = function () {
this.setDefaults();
this.prepareTableFromDataset();
this.state.orderBy = this.orderBy;
var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
if (storedOrder !== null) {
this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy;
}
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
if (storedFilters !== null) {
this.filters = storedFilters;
this.filters.state.open = false;
this.updateStoredFilters(storedFilters.state.values);
}
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
if (storedSettings !== null) {
this.settings = storedSettings;
this.settings.open = false;
}
this.onSettingsRepeaterChange();
var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey);
if (storedColumnVisibility !== null) {
this.columnVisibility = storedColumnVisibility;
}
};
},
]);

249
app/docker/containers/components/ContainersDatatable/ContainersDatatable.tsx Normal file
View File

@ -0,0 +1,249 @@
import { useEffect } from 'react';
import {
useTable,
useSortBy,
useFilters,
useGlobalFilter,
usePagination,
Row,
} from 'react-table';
import { useRowSelectColumn } from '@lineup-lite/hooks';
import { PaginationControls } from '@/portainer/components/pagination-controls';
import {
QuickActionsSettings,
buildAction,
} from '@/portainer/components/datatables/components/QuickActionsSettings';
import {
Table,
TableActions,
TableContainer,
TableHeaderRow,
TableRow,
TableSettingsMenu,
TableTitle,
TableTitleActions,
} from '@/portainer/components/datatables/components';
import { multiple } from '@/portainer/components/datatables/components/filter-types';
import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
import { ColumnVisibilityMenu } from '@/portainer/components/datatables/components/ColumnVisibilityMenu';
import { useRepeater } from '@/portainer/components/datatables/components/useRepeater';
import { useDebounce } from '@/portainer/hooks/useDebounce';
import {
useSearchBarContext,
SearchBar,
} from '@/portainer/components/datatables/components/SearchBar';
import type {
ContainersTableSettings,
DockerContainer,
} from '@/docker/containers/types';
import { useEnvironment } from '@/portainer/environments/useEnvironment';
import { useRowSelect } from '@/portainer/components/datatables/components/useRowSelect';
import { Checkbox } from '@/portainer/components/form-components/Checkbox';
import { TableFooter } from '@/portainer/components/datatables/components/TableFooter';
import { SelectedRowsCount } from '@/portainer/components/datatables/components/SelectedRowsCount';
import { ContainersDatatableActions } from './ContainersDatatableActions';
import { ContainersDatatableSettings } from './ContainersDatatableSettings';
import { useColumns } from './columns';
export interface ContainerTableProps {
isAddActionVisible: boolean;
dataset: DockerContainer[];
onRefresh(): Promise<void>;
isHostColumnVisible: boolean;
autoFocusSearch: boolean;
}
export function ContainersDatatable({
isAddActionVisible,
dataset,
onRefresh,
isHostColumnVisible,
autoFocusSearch,
}: ContainerTableProps) {
const { settings, setTableSettings } =
useTableSettings<ContainersTableSettings>();
const [searchBarValue, setSearchBarValue] = useSearchBarContext();
const columns = useColumns();
const endpoint = useEnvironment();
useRepeater(settings.autoRefreshRate, onRefresh);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
prepareRow,
selectedFlatRows,
allColumns,
gotoPage,
setPageSize,
setHiddenColumns,
toggleHideColumn,
setGlobalFilter,
state: { pageIndex, pageSize },
} = useTable<DockerContainer>(
{
defaultCanFilter: false,
columns,
data: dataset,
filterTypes: { multiple },
initialState: {
pageSize: settings.pageSize || 10,
hiddenColumns: settings.hiddenColumns,
sortBy: [settings.sortBy],
globalFilter: searchBarValue,
},
isRowSelectable(row: Row<DockerContainer>) {
return !row.original.IsPortainer;
},
selectCheckboxComponent: Checkbox,
},
useFilters,
useGlobalFilter,
useSortBy,
usePagination,
useRowSelect,
useRowSelectColumn
);
const debouncedSearchValue = useDebounce(searchBarValue);
useEffect(() => {
setGlobalFilter(debouncedSearchValue);
}, [debouncedSearchValue, setGlobalFilter]);
useEffect(() => {
toggleHideColumn('host', !isHostColumnVisible);
}, [toggleHideColumn, isHostColumnVisible]);
const columnsToHide = allColumns.filter((colInstance) => {
const columnDef = columns.find((c) => c.id === colInstance.id);
return columnDef?.canHide;
});
const actions = [
buildAction('logs', 'Logs'),
buildAction('inspect', 'Inspect'),
buildAction('stats', 'Stats'),
buildAction('exec', 'Console'),
buildAction('attach', 'Attach'),
];
const tableProps = getTableProps();
const tbodyProps = getTableBodyProps();
return (
<TableContainer>
<TableTitle icon="fa-cubes" label="Containers">
<TableTitleActions>
<ColumnVisibilityMenu
columns={columnsToHide}
onChange={handleChangeColumnsVisibility}
value={settings.hiddenColumns}
/>
<TableSettingsMenu
quickActions={<QuickActionsSettings actions={actions} />}
>
<ContainersDatatableSettings />
</TableSettingsMenu>
</TableTitleActions>
</TableTitle>
<TableActions>
<ContainersDatatableActions
selectedItems={selectedFlatRows.map((row) => row.original)}
isAddActionVisible={isAddActionVisible}
endpointId={endpoint.Id}
/>
</TableActions>
<SearchBar
value={searchBarValue}
onChange={handleSearchBarChange}
autoFocus={autoFocusSearch}
/>
<Table
className={tableProps.className}
role={tableProps.role}
style={tableProps.style}
>
<thead>
{headerGroups.map((headerGroup) => {
const { key, className, role, style } =
headerGroup.getHeaderGroupProps();
return (
<TableHeaderRow<DockerContainer>
key={key}
className={className}
role={role}
style={style}
headers={headerGroup.headers}
onSortChange={handleSortChange}
/>
);
})}
</thead>
<tbody
className={tbodyProps.className}
role={tbodyProps.role}
style={tbodyProps.style}
>
{page.map((row) => {
prepareRow(row);
const { key, className, role, style } = row.getRowProps();
return (
<TableRow<DockerContainer>
cells={row.cells}
key={key}
className={className}
role={role}
style={style}
/>
);
})}
</tbody>
</Table>
<TableFooter>
<SelectedRowsCount value={selectedFlatRows.length} />
<PaginationControls
showAll
pageLimit={pageSize}
page={pageIndex + 1}
onPageChange={(p) => gotoPage(p - 1)}
totalCount={dataset.length}
onPageLimitChange={handlePageSizeChange}
/>
</TableFooter>
</TableContainer>
);
function handlePageSizeChange(pageSize: number) {
setPageSize(pageSize);
setTableSettings((settings) => ({ ...settings, pageSize }));
}
function handleChangeColumnsVisibility(hiddenColumns: string[]) {
setHiddenColumns(hiddenColumns);
setTableSettings((settings) => ({ ...settings, hiddenColumns }));
}
function handleSearchBarChange(value: string) {
setSearchBarValue(value);
}
function handleSortChange(id: string, desc: boolean) {
setTableSettings((settings) => ({
...settings,
sortBy: { id, desc },
}));
}
}

288
app/docker/containers/components/ContainersDatatable/ContainersDatatableActions.tsx Normal file
View File

@ -0,0 +1,288 @@
import { useRouter } from '@uirouter/react';
import * as notifications from '@/portainer/services/notifications';
import { useAuthorizations, Authorized } from '@/portainer/hooks/useUser';
import { Link } from '@/portainer/components/Link';
import { confirmContainerDeletion } from '@/portainer/services/modal.service/prompt';
import { setPortainerAgentTargetHeader } from '@/portainer/services/http-request.helper';
import type { ContainerId, DockerContainer } from '@/docker/containers/types';
import {
killContainer,
pauseContainer,
removeContainer,
restartContainer,
resumeContainer,
startContainer,
stopContainer,
} from '@/docker/containers/containers.service';
import type { EnvironmentId } from '@/portainer/environments/types';
import { ButtonGroup, Button } from '@/portainer/components/Button';
type ContainerServiceAction = (
endpointId: EnvironmentId,
containerId: ContainerId
) => Promise<void>;
interface Props {
selectedItems: DockerContainer[];
isAddActionVisible: boolean;
endpointId: EnvironmentId;
}
export function ContainersDatatableActions({
selectedItems,
isAddActionVisible,
endpointId,
}: Props) {
const selectedItemCount = selectedItems.length;
const hasPausedItemsSelected = selectedItems.some(
(item) => item.Status === 'paused'
);
const hasStoppedItemsSelected = selectedItems.some((item) =>
['stopped', 'created'].includes(item.Status)
);
const hasRunningItemsSelected = selectedItems.some((item) =>
['running', 'healthy', 'unhealthy', 'starting'].includes(item.Status)
);
const isAuthorized = useAuthorizations([
'DockerContainerStart',
'DockerContainerStop',
'DockerContainerKill',
'DockerContainerRestart',
'DockerContainerPause',
'DockerContainerUnpause',
'DockerContainerDelete',
'DockerContainerCreate',
]);
const router = useRouter();
if (!isAuthorized) {
return null;
}
return (
<div className="actionBar">
<ButtonGroup>
<Authorized authorizations="DockerContainerStart">
<Button
color="success"
onClick={() => onStartClick(selectedItems)}
disabled={selectedItemCount === 0 || !hasStoppedItemsSelected}
>
<i className="fa fa-play space-right" aria-hidden="true" />
Start
</Button>
</Authorized>
<Authorized authorizations="DockerContainerStop">
<Button
color="danger"
onClick={() => onStopClick(selectedItems)}
disabled={selectedItemCount === 0 || !hasRunningItemsSelected}
>
<i className="fa fa-stop space-right" aria-hidden="true" />
Stop
</Button>
</Authorized>
<Authorized authorizations="DockerContainerKill">
<Button
color="danger"
onClick={() => onKillClick(selectedItems)}
disabled={selectedItemCount === 0}
>
<i className="fa fa-bomb space-right" aria-hidden="true" />
Kill
</Button>
</Authorized>
<Authorized authorizations="DockerContainerRestart">
<Button
onClick={() => onRestartClick(selectedItems)}
disabled={selectedItemCount === 0}
>
<i className="fa fa-sync space-right" aria-hidden="true" />
Restart
</Button>
</Authorized>
<Authorized authorizations="DockerContainerPause">
<Button
onClick={() => onPauseClick(selectedItems)}
disabled={selectedItemCount === 0 || !hasRunningItemsSelected}
>
<i className="fa fa-pause space-right" aria-hidden="true" />
Pause
</Button>
</Authorized>
<Authorized authorizations="DockerContainerUnpause">
<Button
onClick={() => onResumeClick(selectedItems)}
disabled={selectedItemCount === 0 || !hasPausedItemsSelected}
>
<i className="fa fa-play space-right" aria-hidden="true" />
Resume
</Button>
</Authorized>
<Authorized authorizations="DockerContainerDelete">
<Button
color="danger"
onClick={() => onRemoveClick(selectedItems)}
disabled={selectedItemCount === 0}
>
<i className="fa fa-trash-alt space-right" aria-hidden="true" />
Remove
</Button>
</Authorized>
</ButtonGroup>
{isAddActionVisible && (
<Authorized authorizations="DockerContainerCreate">
<Link to="docker.containers.new" className="space-left">
<Button>
<i className="fa fa-plus space-right" aria-hidden="true" />
Add container
</Button>
</Link>
</Authorized>
)}
</div>
);
function onStartClick(selectedItems: DockerContainer[]) {
const successMessage = 'Container successfully started';
const errorMessage = 'Unable to start container';
executeActionOnContainerList(
selectedItems,
startContainer,
successMessage,
errorMessage
);
}
function onStopClick(selectedItems: DockerContainer[]) {
const successMessage = 'Container successfully stopped';
const errorMessage = 'Unable to stop container';
executeActionOnContainerList(
selectedItems,
stopContainer,
successMessage,
errorMessage
);
}
function onRestartClick(selectedItems: DockerContainer[]) {
const successMessage = 'Container successfully restarted';
const errorMessage = 'Unable to restart container';
executeActionOnContainerList(
selectedItems,
restartContainer,
successMessage,
errorMessage
);
}
function onKillClick(selectedItems: DockerContainer[]) {
const successMessage = 'Container successfully killed';
const errorMessage = 'Unable to kill container';
executeActionOnContainerList(
selectedItems,
killContainer,
successMessage,
errorMessage
);
}
function onPauseClick(selectedItems: DockerContainer[]) {
const successMessage = 'Container successfully paused';
const errorMessage = 'Unable to pause container';
executeActionOnContainerList(
selectedItems,
pauseContainer,
successMessage,
errorMessage
);
}
function onResumeClick(selectedItems: DockerContainer[]) {
const successMessage = 'Container successfully resumed';
const errorMessage = 'Unable to resume container';
executeActionOnContainerList(
selectedItems,
resumeContainer,
successMessage,
errorMessage
);
}
function onRemoveClick(selectedItems: DockerContainer[]) {
const isOneContainerRunning = selectedItems.some(
(container) => container.Status === 'running'
);
const runningTitle = isOneContainerRunning ? 'running' : '';
const title = `You are about to remove one or more ${runningTitle} containers.`;
confirmContainerDeletion(title, (result: string[]) => {
if (!result) {
return;
}
const cleanVolumes = !!result[0];
removeSelectedContainers(selectedItems, cleanVolumes);
});
}
async function executeActionOnContainerList(
containers: DockerContainer[],
action: ContainerServiceAction,
successMessage: string,
errorMessage: string
) {
for (let i = 0; i < containers.length; i += 1) {
const container = containers[i];
try {
setPortainerAgentTargetHeader(container.NodeName);
await action(endpointId, container.Id);
notifications.success(successMessage, container.Names[0]);
} catch (err) {
notifications.error(
'Failure',
err as Error,
`${errorMessage}:${container.Names[0]}`
);
}
}
router.stateService.reload();
}
async function removeSelectedContainers(
containers: DockerContainer[],
cleanVolumes: boolean
) {
for (let i = 0; i < containers.length; i += 1) {
const container = containers[i];
try {
setPortainerAgentTargetHeader(container.NodeName);
await removeContainer(endpointId, container, cleanVolumes);
notifications.success(
'Container successfully removed',
container.Names[0]
);
} catch (err) {
notifications.error(
'Failure',
err as Error,
'Unable to remove container'
);
}
}
router.stateService.reload();
}
}

52
app/docker/containers/components/ContainersDatatable/ContainersDatatableContainer.tsx Normal file
View File

@ -0,0 +1,52 @@
import { react2angular } from '@/react-tools/react2angular';
import { EnvironmentProvider } from '@/portainer/environments/useEnvironment';
import { TableSettingsProvider } from '@/portainer/components/datatables/components/useTableSettings';
import { SearchBarProvider } from '@/portainer/components/datatables/components/SearchBar';
import type { Environment } from '@/portainer/environments/types';
import {
ContainersDatatable,
ContainerTableProps,
} from './ContainersDatatable';
interface Props extends ContainerTableProps {
endpoint: Environment;
}
export function ContainersDatatableContainer({ endpoint, ...props }: Props) {
const defaultSettings = {
autoRefreshRate: 0,
truncateContainerName: 32,
hiddenQuickActions: [],
hiddenColumns: [],
pageSize: 10,
sortBy: { id: 'state', desc: false },
};
return (
<EnvironmentProvider environment={endpoint}>
<TableSettingsProvider defaults={defaultSettings} storageKey="containers">
<SearchBarProvider>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<ContainersDatatable {...props} />
</SearchBarProvider>
</TableSettingsProvider>
</EnvironmentProvider>
);
}
export const ContainersDatatableAngular = react2angular(
ContainersDatatableContainer,
[
'endpoint',
'isAddActionVisible',
'containerService',
'httpRequestHelper',
'notifications',
'modalService',
'dataset',
'onRefresh',
'isHostColumnVisible',
'autoFocusSearch',
]
);

35
app/docker/containers/components/ContainersDatatable/ContainersDatatableSettings.tsx Normal file
View File

@ -0,0 +1,35 @@
import { TableSettingsMenuAutoRefresh } from '@/portainer/components/datatables/components/TableSettingsMenuAutoRefresh';
import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
import { Checkbox } from '@/portainer/components/form-components/Checkbox';
import type { ContainersTableSettings } from '@/docker/containers/types';
export function ContainersDatatableSettings() {
const { settings, setTableSettings } = useTableSettings<
ContainersTableSettings
>();
return (
<>
<Checkbox
id="settings-container-truncate-nae"
label="Truncate container name"
checked={settings.truncateContainerName > 0}
onChange={() =>
setTableSettings((settings) => ({
...settings,
truncateContainerName: settings.truncateContainerName > 0 ? 0 : 32,
}))
}
/>
<TableSettingsMenuAutoRefresh
value={settings.autoRefreshRate}
onChange={handleRefreshRateChange}
/>
</>
);
function handleRefreshRateChange(autoRefreshRate: number) {
setTableSettings({ autoRefreshRate });
}
}

14
app/docker/containers/components/ContainersDatatable/columns/created.tsx Normal file
View File

@ -0,0 +1,14 @@
import { Column } from 'react-table';
import { isoDateFromTimestamp } from '@/portainer/filters/filters';
import type { DockerContainer } from '@/docker/containers/types';
export const created: Column<DockerContainer> = {
Header: 'Created',
accessor: 'Created',
id: 'created',
Cell: ({ value }) => isoDateFromTimestamp(value),
disableFilters: true,
canHide: true,
Filter: () => null,
};

13
app/docker/containers/components/ContainersDatatable/columns/host.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Column } from 'react-table';
import type { DockerContainer } from '@/docker/containers/types';
export const host: Column<DockerContainer> = {
Header: 'Host',
accessor: (row) => row.NodeName || '-',
id: 'host',
disableFilters: true,
canHide: true,
sortType: 'string',
Filter: () => null,
};

51
app/docker/containers/components/ContainersDatatable/columns/image.tsx Normal file
View File

@ -0,0 +1,51 @@
import { Column } from 'react-table';
import { useSref } from '@uirouter/react';
import { useEnvironment } from '@/portainer/environments/useEnvironment';
import { EnvironmentStatus } from '@/portainer/environments/types';
import type { DockerContainer } from '@/docker/containers/types';
export const image: Column<DockerContainer> = {
Header: 'Image',
accessor: 'Image',
id: 'image',
disableFilters: true,
Cell: ImageCell,
canHide: true,
sortType: 'string',
Filter: () => null,
};
interface Props {
value: string;
}
function ImageCell({ value: imageName }: Props) {
const endpoint = useEnvironment();
const offlineMode = endpoint.Status !== EnvironmentStatus.Up;
const shortImageName = trimSHASum(imageName);
const linkProps = useSref('docker.images.image', { id: imageName });
if (offlineMode) {
return shortImageName;
}
return (
<a href={linkProps.href} onClick={linkProps.onClick}>
{shortImageName}
</a>
);
function trimSHASum(imageName: string) {
if (!imageName) {
return '';
}
if (imageName.indexOf('sha256:') === 0) {
return imageName.substring(7, 19);
}
return imageName.split('@sha256')[0];
}
}

30
app/docker/containers/components/ContainersDatatable/columns/index.tsx Normal file
View File

@ -0,0 +1,30 @@
import { useMemo } from 'react';
import { created } from './created';
import { host } from './host';
import { image } from './image';
import { ip } from './ip';
import { name } from './name';
import { ownership } from './ownership';
import { ports } from './ports';
import { quickActions } from './quick-actions';
import { stack } from './stack';
import { state } from './state';
export function useColumns() {
return useMemo(
() => [
name,
state,
quickActions,
stack,
image,
created,
ip,
host,
ports,
ownership,
],
[]
);
}

12
app/docker/containers/components/ContainersDatatable/columns/ip.tsx Normal file
View File

@ -0,0 +1,12 @@
import { Column } from 'react-table';
import type { DockerContainer } from '@/docker/containers/types';
export const ip: Column<DockerContainer> = {
Header: 'IP Address',
accessor: (row) => row.IP || '-',
id: 'ip',
disableFilters: true,
canHide: true,
Filter: () => null,
};

54
app/docker/containers/components/ContainersDatatable/columns/name.tsx Normal file
View File

@ -0,0 +1,54 @@
import { CellProps, Column, TableInstance } from 'react-table';
import _ from 'lodash-es';
import { useSref } from '@uirouter/react';
import { useEnvironment } from '@/portainer/environments/useEnvironment';
import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
import type {
ContainersTableSettings,
DockerContainer,
} from '@/docker/containers/types';
export const name: Column<DockerContainer> = {
Header: 'Name',
accessor: (row) => {
const name = row.Names[0];
return name.substring(1, name.length);
},
id: 'name',
Cell: NameCell,
disableFilters: true,
Filter: () => null,
canHide: true,
sortType: 'string',
};
export function NameCell({
value: name,
row: { original: container },
}: CellProps<TableInstance>) {
const { settings } = useTableSettings<ContainersTableSettings>();
const truncate = settings.truncateContainerName;
const endpoint = useEnvironment();
const offlineMode = endpoint.Status !== 1;
const linkProps = useSref('docker.containers.container', {
id: container.Id,
nodeName: container.NodeName,
});
let shortName = name;
if (truncate > 0) {
shortName = _.truncate(name, { length: truncate });
}
if (offlineMode) {
return <span>{shortName}</span>;
}
return (
<a href={linkProps.href} onClick={linkProps.onClick} title={name}>
{shortName}
</a>
);
}

34
app/docker/containers/components/ContainersDatatable/columns/ownership.tsx Normal file
View File

@ -0,0 +1,34 @@
import { Column } from 'react-table';
import clsx from 'clsx';
import { ownershipIcon } from '@/portainer/filters/filters';
import { ResourceControlOwnership } from '@/portainer/models/resourceControl/resourceControlOwnership';
import type { DockerContainer } from '@/docker/containers/types';
export const ownership: Column<DockerContainer> = {
Header: 'Ownership',
id: 'ownership',
accessor: (row) =>
row.ResourceControl?.Ownership || ResourceControlOwnership.ADMINISTRATORS,
Cell: OwnershipCell,
disableFilters: true,
canHide: true,
sortType: 'string',
Filter: () => null,
};
interface Props {
value: 'public' | 'private' | 'restricted' | 'administrators';
}
function OwnershipCell({ value }: Props) {
return (
<>
<i
className={clsx(ownershipIcon(value), 'space-right')}
aria-hidden="true"
/>
{value || ResourceControlOwnership.ADMINISTRATORS}
</>
);
}

41
app/docker/containers/components/ContainersDatatable/columns/ports.tsx Normal file
View File

@ -0,0 +1,41 @@
import { Column } from 'react-table';
import _ from 'lodash-es';
import { useEnvironment } from '@/portainer/environments/useEnvironment';
import type { DockerContainer, Port } from '@/docker/containers/types';
export const ports: Column<DockerContainer> = {
Header: 'Published Ports',
accessor: 'Ports',
id: 'ports',
Cell: PortsCell,
disableSortBy: true,
disableFilters: true,
canHide: true,
Filter: () => null,
};
interface Props {
value: Port[];
}
function PortsCell({ value: ports }: Props) {
const { PublicURL: publicUrl } = useEnvironment();
if (ports.length === 0) {
return '-';
}
return _.uniqBy(ports, 'public').map((port) => (
<a
key={`${port.host}:${port.public}`}
className="image-tag"
href={`http://${publicUrl || port.host}:${port.public}`}
target="_blank"
rel="noreferrer"
>
<i className="fa fa-external-link-alt" aria-hidden="true" />
{port.public}:{port.private}
</a>
));
}

70
app/docker/containers/components/ContainersDatatable/columns/quick-actions.tsx Normal file
View File

@ -0,0 +1,70 @@
import { CellProps, Column } from 'react-table';
import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
import { useEnvironment } from '@/portainer/environments/useEnvironment';
import { useAuthorizations } from '@/portainer/hooks/useUser';
import { ContainerQuickActions } from '@/docker/components/container-quick-actions/ContainerQuickActions';
import type {
ContainersTableSettings,
DockerContainer,
} from '@/docker/containers/types';
import { EnvironmentStatus } from '@/portainer/environments/types';
export const quickActions: Column<DockerContainer> = {
Header: 'Quick Actions',
id: 'actions',
Cell: QuickActionsCell,
disableFilters: true,
disableSortBy: true,
canHide: true,
sortType: 'string',
Filter: () => null,
};
function QuickActionsCell({
row: { original: container },
}: CellProps<DockerContainer>) {
const endpoint = useEnvironment();
const offlineMode = endpoint.Status !== EnvironmentStatus.Up;
const { settings } = useTableSettings<ContainersTableSettings>();
const { hiddenQuickActions = [] } = settings;
const wrapperState = {
showQuickActionAttach: !hiddenQuickActions.includes('attach'),
showQuickActionExec: !hiddenQuickActions.includes('exec'),
showQuickActionInspect: !hiddenQuickActions.includes('inspect'),
showQuickActionLogs: !hiddenQuickActions.includes('logs'),
showQuickActionStats: !hiddenQuickActions.includes('stats'),
};
const someOn =
wrapperState.showQuickActionAttach ||
wrapperState.showQuickActionExec ||
wrapperState.showQuickActionInspect ||
wrapperState.showQuickActionLogs ||
wrapperState.showQuickActionStats;
const isAuthorized = useAuthorizations([
'DockerContainerStats',
'DockerContainerLogs',
'DockerExecStart',
'DockerContainerInspect',
'DockerTaskInspect',
'DockerTaskLogs',
]);
if (offlineMode || !someOn || !isAuthorized) {
return null;
}
return (
<ContainerQuickActions
containerId={container.Id}
nodeName={container.NodeName}
status={container.Status}
state={wrapperState}
/>
);
}

13
app/docker/containers/components/ContainersDatatable/columns/stack.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Column } from 'react-table';
import type { DockerContainer } from '@/docker/containers/types';
export const stack: Column<DockerContainer> = {
Header: 'Stack',
accessor: (row) => row.StackName || '-',
id: 'stack',
sortType: 'string',
disableFilters: true,
canHide: true,
Filter: () => null,
};

60
app/docker/containers/components/ContainersDatatable/columns/state.tsx Normal file
View File

@ -0,0 +1,60 @@
import { Column } from 'react-table';
import clsx from 'clsx';
import _ from 'lodash-es';
import { DefaultFilter } from '@/portainer/components/datatables/components/Filter';
import type {
DockerContainer,
DockerContainerStatus,
} from '@/docker/containers/types';
export const state: Column<DockerContainer> = {
Header: 'State',
accessor: 'Status',
id: 'state',
Cell: StatusCell,
sortType: 'string',
filter: 'multiple',
Filter: DefaultFilter,
canHide: true,
};
function StatusCell({ value: status }: { value: DockerContainerStatus }) {
const statusNormalized = _.toLower(status);
const hasHealthCheck = ['starting', 'healthy', 'unhealthy'].includes(
statusNormalized
);
const statusClassName = getClassName();
return (
<span
className={clsx('label', `label-${statusClassName}`, {
interactive: hasHealthCheck,
})}
title={hasHealthCheck ? 'This container has a health check' : ''}
>
{status}
</span>
);
function getClassName() {
if (includeString(['paused', 'starting', 'unhealthy'])) {
return 'warning';
}
if (includeString(['created'])) {
return 'info';
}
if (includeString(['stopped', 'dead', 'exited'])) {
return 'danger';
}
return 'success';
function includeString(values: DockerContainerStatus[]) {
return values.some((val) => statusNormalized.includes(val));
}
}
}

101
app/docker/containers/containers.service.ts Normal file
View File

@ -0,0 +1,101 @@
import { EnvironmentId } from '@/portainer/environments/types';
import PortainerError from '@/portainer/error';
import axios from '@/portainer/services/axios';
import { genericHandler } from '../rest/response/handlers';
import { ContainerId, DockerContainer } from './types';
export async function startContainer(
endpointId: EnvironmentId,
id: ContainerId
) {
await axios.post<void>(
urlBuilder(endpointId, id, 'start'),
{},
{ transformResponse: genericHandler }
);
}
export async function stopContainer(
endpointId: EnvironmentId,
id: ContainerId
) {
await axios.post<void>(urlBuilder(endpointId, id, 'stop'), {});
}
export async function restartContainer(
endpointId: EnvironmentId,
id: ContainerId
) {
await axios.post<void>(urlBuilder(endpointId, id, 'restart'), {});
}
export async function killContainer(
endpointId: EnvironmentId,
id: ContainerId
) {
await axios.post<void>(urlBuilder(endpointId, id, 'kill'), {});
}
export async function pauseContainer(
endpointId: EnvironmentId,
id: ContainerId
) {
await axios.post<void>(urlBuilder(endpointId, id, 'pause'), {});
}
export async function resumeContainer(
endpointId: EnvironmentId,
id: ContainerId
) {
await axios.post<void>(urlBuilder(endpointId, id, 'unpause'), {});
}
export async function renameContainer(
endpointId: EnvironmentId,
id: ContainerId,
name: string
) {
await axios.post<void>(
urlBuilder(endpointId, id, 'rename'),
{},
{ params: { name }, transformResponse: genericHandler }
);
}
export async function removeContainer(
endpointId: EnvironmentId,
container: DockerContainer,
removeVolumes: boolean
) {
try {
const { data } = await axios.delete<null | { message: string }>(
urlBuilder(endpointId, container.Id),
{
params: { v: removeVolumes ? 1 : 0, force: true },
transformResponse: genericHandler,
}
);
if (data && data.message) {
throw new PortainerError(data.message);
}
} catch (e) {
throw new PortainerError('Unable to remove container', e as Error);
}
}
function urlBuilder(
endpointId: EnvironmentId,
id: ContainerId,
action?: string
) {
const url = `/endpoints/${endpointId}/docker/containers/${id}`;
if (action) {
return `${url}/${action}`;
}
return url;
}

7
app/docker/containers/index.ts Normal file
View File

@ -0,0 +1,7 @@
import angular from 'angular';
import { ContainersDatatableAngular } from './components/ContainersDatatable/ContainersDatatableContainer';
export default angular
.module('portainer.docker.containers', [])
.component('containersDatatable', ContainersDatatableAngular).name;

45
app/docker/containers/types.ts Normal file
View File

@ -0,0 +1,45 @@
import { ResourceControlViewModel } from '@/portainer/models/resourceControl/resourceControl';
export type DockerContainerStatus =
| 'paused'
| 'stopped'
| 'created'
| 'healthy'
| 'unhealthy'
| 'starting'
| 'running'
| 'dead'
| 'exited';
export type QuickAction = 'attach' | 'exec' | 'inspect' | 'logs' | 'stats';
export interface ContainersTableSettings {
hiddenQuickActions: QuickAction[];
hiddenColumns: string[];
truncateContainerName: number;
autoRefreshRate: number;
pageSize: number;
sortBy: { id: string; desc: boolean };
}
export interface Port {
host: string;
public: string;
private: string;
}
export type ContainerId = string;
export type DockerContainer = {
IsPortainer: boolean;
Status: DockerContainerStatus;
NodeName: string;
Id: ContainerId;
IP: string;
Names: string[];
Created: string;
ResourceControl: ResourceControlViewModel;
Ports: Port[];
StackName?: string;
Image: string;
};

35
app/docker/rest/container.js
View File

@ -24,26 +24,6 @@ angular.module('portainer.docker').factory('Container', [
method: 'GET',
params: { action: 'json' },
},
stop: {
method: 'POST',
params: { id: '@id', action: 'stop' },
},
restart: {
method: 'POST',
params: { id: '@id', action: 'restart' },
},
kill: {
method: 'POST',
params: { id: '@id', action: 'kill' },
},
pause: {
method: 'POST',
params: { id: '@id', action: 'pause' },
},
unpause: {
method: 'POST',
params: { id: '@id', action: 'unpause' },
},
logs: {
method: 'GET',
params: { id: '@id', action: 'logs' },
@ -60,27 +40,12 @@ angular.module('portainer.docker').factory('Container', [
params: { id: '@id', action: 'top' },
ignoreLoadingBar: true,
},
start: {
method: 'POST',
params: { id: '@id', action: 'start' },
transformResponse: genericHandler,
},
create: {
method: 'POST',
params: { action: 'create' },
transformResponse: genericHandler,
ignoreLoadingBar: true,
},
remove: {
method: 'DELETE',
params: { id: '@id', v: '@v', force: '@force' },
transformResponse: genericHandler,
},
rename: {
method: 'POST',
params: { id: '@id', action: 'rename', name: '@name' },
transformResponse: genericHandler,
},
exec: {
method: 'POST',
params: { id: '@id', action: 'exec' },

380
app/docker/services/containerService.js
View File

@ -1,232 +1,206 @@
import angular from 'angular';
import {
killContainer,
pauseContainer,
removeContainer,
renameContainer,
restartContainer,
resumeContainer,
startContainer,
stopContainer,
} from '@/docker/containers/containers.service';
import { ContainerDetailsViewModel, ContainerStatsViewModel, ContainerViewModel } from '../models/container';
angular.module('portainer.docker').factory('ContainerService', [
'$q',
'Container',
'ResourceControlService',
'LogHelper',
'$timeout',
function ContainerServiceFactory($q, Container, ResourceControlService, LogHelper, $timeout) {
'use strict';
var service = {};
angular.module('portainer.docker').factory('ContainerService', ContainerServiceFactory);
service.container = function (id) {
var deferred = $q.defer();
/* @ngInject */
function ContainerServiceFactory($q, Container, LogHelper, $timeout, EndpointProvider) {
const service = {
killContainer: withEndpointId(killContainer),
pauseContainer: withEndpointId(pauseContainer),
renameContainer: withEndpointId(renameContainer),
restartContainer: withEndpointId(restartContainer),
resumeContainer: withEndpointId(resumeContainer),
startContainer: withEndpointId(startContainer),
stopContainer: withEndpointId(stopContainer),
remove: withEndpointId(removeContainer),
updateRestartPolicy,
updateLimits,
};
Container.get({ id: id })
.$promise.then(function success(data) {
var container = new ContainerDetailsViewModel(data);
deferred.resolve(container);
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to retrieve container information', err: err });
service.container = function (id) {
var deferred = $q.defer();
Container.get({ id: id })
.$promise.then(function success(data) {
var container = new ContainerDetailsViewModel(data);
deferred.resolve(container);
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to retrieve container information', err: err });
});
return deferred.promise;
};
service.containers = function (all, filters) {
var deferred = $q.defer();
Container.query({ all: all, filters: filters })
.$promise.then(function success(data) {
var containers = data.map(function (item) {
return new ContainerViewModel(item);
});
deferred.resolve(containers);
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to retrieve containers', err: err });
});
return deferred.promise;
};
return deferred.promise;
};
service.containers = function (all, filters) {
var deferred = $q.defer();
Container.query({ all: all, filters: filters })
.$promise.then(function success(data) {
var containers = data.map(function (item) {
return new ContainerViewModel(item);
});
deferred.resolve(containers);
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to retrieve containers', err: err });
});
service.resizeTTY = function (id, width, height, timeout) {
var deferred = $q.defer();
return deferred.promise;
};
service.resizeTTY = function (id, width, height, timeout) {
var deferred = $q.defer();
$timeout(function () {
Container.resize({}, { id: id, height: height, width: width })
.$promise.then(function success(data) {
if (data.message) {
deferred.reject({ msg: 'Unable to resize tty of container ' + id, err: data.message });
} else {
deferred.resolve(data);
}
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to resize tty of container ' + id, err: err });
});
}, timeout);
return deferred.promise;
};
service.startContainer = function (id) {
return Container.start({ id: id }, {}).$promise;
};
service.stopContainer = function (id) {
return Container.stop({ id: id }, {}).$promise;
};
service.restartContainer = function (id) {
return Container.restart({ id: id }, {}).$promise;
};
service.killContainer = function (id) {
return Container.kill({ id: id }, {}).$promise;
};
service.pauseContainer = function (id) {
return Container.pause({ id: id }, {}).$promise;
};
service.resumeContainer = function (id) {
return Container.unpause({ id: id }, {}).$promise;
};
service.renameContainer = function (id, newContainerName) {
return Container.rename({ id: id, name: newContainerName }, {}).$promise;
};
service.updateRestartPolicy = updateRestartPolicy;
service.updateLimits = updateLimits;
function updateRestartPolicy(id, restartPolicy, maximumRetryCounts) {
return Container.update({ id: id }, { RestartPolicy: { Name: restartPolicy, MaximumRetryCount: maximumRetryCounts } }).$promise;
}
function updateLimits(id, config) {
return Container.update(
{ id: id },
{
// MemorySwap: must be set
// -1: non limits, 0: treated as unset(cause update error).
MemoryReservation: config.HostConfig.MemoryReservation,
Memory: config.HostConfig.Memory,
MemorySwap: -1,
NanoCpus: config.HostConfig.NanoCpus,
}
).$promise;
}
service.createContainer = function (configuration) {
var deferred = $q.defer();
Container.create(configuration)
.$promise.then(function success(data) {
deferred.resolve(data);
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to create container', err: err });
});
return deferred.promise;
};
service.createAndStartContainer = function (configuration) {
var deferred = $q.defer();
var container;
service
.createContainer(configuration)
.then(function success(data) {
container = data;
return service.startContainer(container.Id);
})
.then(function success() {
deferred.resolve(container);
})
.catch(function error(err) {
deferred.reject(err);
});
return deferred.promise;
};
service.remove = function (container, removeVolumes) {
var deferred = $q.defer();
Container.remove({ id: container.Id, v: removeVolumes ? 1 : 0, force: true })
$timeout(function () {
Container.resize({}, { id: id, height: height, width: width })
.$promise.then(function success(data) {
if (data.message) {
deferred.reject({ msg: data.message, err: data.message });
} else {
deferred.resolve();
}
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to remove container', err: err });
});
return deferred.promise;
};
service.createExec = function (execConfig) {
var deferred = $q.defer();
Container.exec({}, execConfig)
.$promise.then(function success(data) {
if (data.message) {
deferred.reject({ msg: data.message, err: data.message });
deferred.reject({ msg: 'Unable to resize tty of container ' + id, err: data.message });
} else {
deferred.resolve(data);
}
})
.catch(function error(err) {
deferred.reject(err);
deferred.reject({ msg: 'Unable to resize tty of container ' + id, err: err });
});
}, timeout);
return deferred.promise;
return deferred.promise;
};
function updateRestartPolicy(id, restartPolicy, maximumRetryCounts) {
return Container.update({ id: id }, { RestartPolicy: { Name: restartPolicy, MaximumRetryCount: maximumRetryCounts } }).$promise;
}
function updateLimits(id, config) {
return Container.update(
{ id: id },
{
// MemorySwap: must be set
// -1: non limits, 0: treated as unset(cause update error).
MemoryReservation: config.HostConfig.MemoryReservation,
Memory: config.HostConfig.Memory,
MemorySwap: -1,
NanoCpus: config.HostConfig.NanoCpus,
}
).$promise;
}
service.createContainer = function (configuration) {
var deferred = $q.defer();
Container.create(configuration)
.$promise.then(function success(data) {
deferred.resolve(data);
})
.catch(function error(err) {
deferred.reject({ msg: 'Unable to create container', err: err });
});
return deferred.promise;
};
service.createAndStartContainer = function (configuration) {
var deferred = $q.defer();
var container;
service
.createContainer(configuration)
.then(function success(data) {
container = data;
return service.startContainer(container.Id);
})
.then(function success() {
deferred.resolve(container);
})
.catch(function error(err) {
deferred.reject(err);
});
return deferred.promise;
};
service.createExec = function (execConfig) {
var deferred = $q.defer();
Container.exec({}, execConfig)
.$promise.then(function success(data) {
if (data.message) {
deferred.reject({ msg: data.message, err: data.message });
} else {
deferred.resolve(data);
}
})
.catch(function error(err) {
deferred.reject(err);
});
return deferred.promise;
};
service.logs = function (id, stdout, stderr, timestamps, since, tail, stripHeaders) {
var deferred = $q.defer();
var parameters = {
id: id,
stdout: stdout || 0,
stderr: stderr || 0,
timestamps: timestamps || 0,
since: since || 0,
tail: tail || 'all',
};
service.logs = function (id, stdout, stderr, timestamps, since, tail, stripHeaders) {
var deferred = $q.defer();
Container.logs(parameters)
.$promise.then(function success(data) {
var logs = LogHelper.formatLogs(data.logs, stripHeaders);
deferred.resolve(logs);
})
.catch(function error(err) {
deferred.reject(err);
});
var parameters = {
id: id,
stdout: stdout || 0,
stderr: stderr || 0,
timestamps: timestamps || 0,
since: since || 0,
tail: tail || 'all',
};
return deferred.promise;
};
Container.logs(parameters)
.$promise.then(function success(data) {
var logs = LogHelper.formatLogs(data.logs, stripHeaders);
deferred.resolve(logs);
})
.catch(function error(err) {
deferred.reject(err);
});
service.containerStats = function (id) {
var deferred = $q.defer();
return deferred.promise;
};
Container.stats({ id: id })
.$promise.then(function success(data) {
var containerStats = new ContainerStatsViewModel(data);
deferred.resolve(containerStats);
})
.catch(function error(err) {
deferred.reject(err);
});
service.containerStats = function (id) {
var deferred = $q.defer();
return deferred.promise;
};
Container.stats({ id: id })
.$promise.then(function success(data) {
var containerStats = new ContainerStatsViewModel(data);
deferred.resolve(containerStats);
})
.catch(function error(err) {
deferred.reject(err);
});
service.containerTop = function (id) {
return Container.top({ id: id }).$promise;
};
return deferred.promise;
};
service.inspect = function (id) {
return Container.inspect({ id: id }).$promise;
};
service.containerTop = function (id) {
return Container.top({ id: id }).$promise;
};
service.prune = function (filters) {
return Container.prune({ filters: filters }).$promise;
};
service.inspect = function (id) {
return Container.inspect({ id: id }).$promise;
};
return service;
service.prune = function (filters) {
return Container.prune({ filters: filters }).$promise;
};
function withEndpointId(func) {
const endpointId = EndpointProvider.endpointID();
return service;
},
]);
return func.bind(null, endpointId);
}
}

14
app/docker/views/containers/containers.html
View File

@ -7,19 +7,15 @@
<rd-header-content>Containers</rd-header-content>
</rd-header>
<information-panel-offline ng-if="offlineMode"></information-panel-offline>
<div class="row">
<div class="col-sm-12" ng-if="containers">
<containers-datatable
title-text="Containers"
title-icon="fa-cubes"
endpoint="endpoint"
dataset="containers"
table-key="containers"
order-by="Status"
show-host-column="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
show-add-action="true"
offline-mode="offlineMode"
refresh-callback="getContainers"
endpoint-public-url="endpoint.PublicURL"
is-host-column-visible="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
is-add-action-visible="true"
on-refresh="(getContainers)"
></containers-datatable>
</div>
</div>

4
app/docker/views/containers/edit/containerController.js
View File

@ -1,6 +1,7 @@
import moment from 'moment';
import _ from 'lodash-es';
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
import { confirmContainerDeletion } from '@/portainer/services/modal.service/prompt';
angular.module('portainer.docker').controller('ContainerController', [
'$q',
@ -246,7 +247,8 @@ angular.module('portainer.docker').controller('ContainerController', [
if ($scope.container.State.Running) {
title = 'You are about to remove a running container.';
}
ModalService.confirmContainerDeletion(title, function (result) {
confirmContainerDeletion(title, function (result) {
if (!result) {
return;
}

2
app/portainer/components/Button/ButtonGroup.tsx
View File

@ -26,6 +26,6 @@ function sizeClass(size: Size | undefined) {
case 'large':
return 'btn-group-lg';
default:
return 'btn-group-sm';
return '';
}
}

65
app/portainer/components/datatables/components/ColumnVisibilityMenu.tsx Normal file
View File

@ -0,0 +1,65 @@
import clsx from 'clsx';
import { Menu, MenuButton, MenuList } from '@reach/menu-button';
import { ColumnInstance } from 'react-table';
import { Checkbox } from '@/portainer/components/form-components/Checkbox';
import type { DockerContainer } from '@/docker/containers/types';
import { useTableContext } from './TableContainer';
interface Props {
columns: ColumnInstance<DockerContainer>[];
onChange: (value: string[]) => void;
value: string[];
}
export function ColumnVisibilityMenu({ columns, onChange, value }: Props) {
useTableContext();
return (
<Menu className="setting">
{({ isExpanded }) => (
<>
<MenuButton
className={clsx('table-setting-menu-btn', {
'setting-active': isExpanded,
})}
>
<i className="fa fa-columns" aria-hidden="true" /> Columns
</MenuButton>
<MenuList>
<div className="tableMenu">
<div className="menuHeader">Show / Hide Columns</div>
<div className="menuContent">
{columns.map((column) => (
<div key={column.id}>
<Checkbox
checked={column.isVisible}
label={column.Header as string}
id={`visibility_${column.id}`}
onChange={(e) =>
handleChangeColumnVisibility(
column.id,
e.target.checked
)
}
/>
</div>
))}
</div>
</div>
</MenuList>
</>
)}
</Menu>
);
function handleChangeColumnVisibility(colId: string, visible: boolean) {
if (visible) {
onChange(value.filter((id) => id !== colId));
return;
}
onChange([...value, colId]);
}
}

93
app/portainer/components/datatables/components/Filter.tsx Normal file
View File

@ -0,0 +1,93 @@
import clsx from 'clsx';
import { useMemo } from 'react';
import { Menu, MenuButton, MenuPopover } from '@reach/menu-button';
import { ColumnInstance } from 'react-table';
export function DefaultFilter({
column: { filterValue, setFilter, preFilteredRows, id },
}: {
column: ColumnInstance;
}) {
const options = useMemo(() => {
const options = new Set<string>();
preFilteredRows.forEach((row) => {
options.add(row.values[id]);
});
return Array.from(options);
}, [id, preFilteredRows]);
return (
<MultipleSelectionFilter
options={options}
filterKey={id}
value={filterValue}
onChange={setFilter}
/>
);
}
interface MultipleSelectionFilterProps {
options: string[];
value: string[];
filterKey: string;
onChange: (value: string[]) => void;
}
function MultipleSelectionFilter({
options,
value = [],
filterKey,
onChange,
}: MultipleSelectionFilterProps) {
const enabled = value.length > 0;
return (
<div>
<Menu>
<MenuButton
className={clsx('table-filter', { 'filter-active': enabled })}
>
Filter
<i
className={clsx(
'fa',
'space-left',
enabled ? 'fa-check' : 'fa-filter'
)}
aria-hidden="true"
/>
</MenuButton>
<MenuPopover className="dropdown-menu">
<div className="tableMenu">
<div className="menuHeader">Filter by state</div>
<div className="menuContent">
{options.map((option, index) => (
<div className="md-checkbox" key={index}>
<input
id={`filter_${filterKey}_${index}`}
type="checkbox"
checked={value.includes(option)}
onChange={() => handleChange(option)}
/>
<label htmlFor={`filter_${filterKey}_${index}`}>
{option}
</label>
</div>
))}
</div>
</div>
</MenuPopover>
</Menu>
</div>
);
function handleChange(option: string) {
if (value.includes(option)) {
onChange(value.filter((o) => o !== option));
return;
}
onChange([...value, option]);
}
}

49
app/portainer/components/datatables/components/QuickActionsSettings.tsx Normal file
View File

@ -0,0 +1,49 @@
import { Checkbox } from '@/portainer/components/form-components/Checkbox';
import { useTableSettings } from './useTableSettings';
export interface Action {
id: string;
label: string;
}
interface Props {
actions: Action[];
}
export interface QuickActionsSettingsType {
hiddenQuickActions: string[];
}
export function QuickActionsSettings({ actions }: Props) {
const { settings, setTableSettings } = useTableSettings<
QuickActionsSettingsType
>();
return (
<>
{actions.map(({ id, label }) => (
<Checkbox
key={id}
label={label}
id={`quick-actions-${id}`}
checked={!settings.hiddenQuickActions.includes(id)}
onChange={(e) => toggleAction(id, e.target.checked)}
/>
))}
</>
);
function toggleAction(key: string, value: boolean) {
setTableSettings(({ hiddenQuickActions = [], ...settings }) => ({
...settings,
hiddenQuickActions: value
? hiddenQuickActions.filter((id) => id !== key)
: [...hiddenQuickActions, key],
}));
}
}
export function buildAction(id: string, label: string): Action {
return { id, label };
}

59
app/portainer/components/datatables/components/SearchBar.tsx Normal file
View File

@ -0,0 +1,59 @@
import { useContext, createContext, PropsWithChildren } from 'react';
import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
interface Props {
autoFocus: boolean;
value: string;
onChange(value: string): void;
}
export function SearchBar({ autoFocus, value, onChange }: Props) {
return (
<div className="searchBar">
<i className="fa fa-search searchIcon" aria-hidden="true" />
<input
autoFocus={autoFocus}
type="text"
className="searchInput"
value={value}
onChange={(e) => onChange(e.target.value)}
placeholder="Search..."
/>
</div>
);
}
const SearchBarContext = createContext<
[string, (value: string) => void] | null
>(null);
interface SearchBarProviderProps {
defaultValue?: string;
}
export function SearchBarProvider({
children,
defaultValue = '',
}: PropsWithChildren<SearchBarProviderProps>) {
const [value, setValue] = useLocalStorage(
'datatable_text_filter_containers',
defaultValue,
sessionStorage
);
return (
<SearchBarContext.Provider value={[value, setValue]}>
{children}
</SearchBarContext.Provider>
);
}
export function useSearchBarContext() {
const context = useContext(SearchBarContext);
if (context === null) {
throw new Error('should be used under SearchBarProvider');
}
return context;
}

9
app/portainer/components/datatables/components/SelectedRowsCount.tsx Normal file
View File

@ -0,0 +1,9 @@
interface SelectedRowsCountProps {
value: number;
}
export function SelectedRowsCount({ value }: SelectedRowsCountProps) {
return value !== 0 ? (
<div className="infoBar">{value} item(s) selected</div>
) : null;
}

29
app/portainer/components/datatables/components/Table.tsx Normal file
View File

@ -0,0 +1,29 @@
import clsx from 'clsx';
import { PropsWithChildren } from 'react';
import { TableProps } from 'react-table';
import { useTableContext } from './TableContainer';
export function Table({
children,
className,
role,
style,
}: PropsWithChildren<TableProps>) {
useTableContext();
return (
<div className="table-responsive">
<table
className={clsx(
'table table-hover table-filters nowrap-cells',
className
)}
role={role}
style={style}
>
{children}
</table>
</div>
);
}

9
app/portainer/components/datatables/components/TableActions.tsx Normal file
View File

@ -0,0 +1,9 @@
import { PropsWithChildren } from 'react';
import { useTableContext } from './TableContainer';
export function TableActions({ children }: PropsWithChildren<unknown>) {
useTableContext();
return <div className="actionBar">{children}</div>;
}

25
app/portainer/components/datatables/components/TableContainer.tsx Normal file
View File

@ -0,0 +1,25 @@
import { createContext, PropsWithChildren, useContext } from 'react';
import { Widget, WidgetBody } from '@/portainer/components/widget';
const Context = createContext<null | boolean>(null);
export function useTableContext() {
const context = useContext(Context);
if (context == null) {
throw new Error('Should be nested inside a TableContainer component');
}
}
export function TableContainer({ children }: PropsWithChildren<unknown>) {
return (
<Context.Provider value>
<div className="datatable">
<Widget>
<WidgetBody className="no-padding">{children}</WidgetBody>
</Widget>
</div>
</Context.Provider>
);
}

9
app/portainer/components/datatables/components/TableFooter.tsx Normal file
View File

@ -0,0 +1,9 @@
import { PropsWithChildren } from 'react';
import { useTableContext } from './TableContainer';
export function TableFooter({ children }: PropsWithChildren<unknown>) {
useTableContext();
return <footer className="footer">{children}</footer>;
}

5
app/portainer/components/datatables/components/TableHeaderCell.module.css Normal file
View File

@ -0,0 +1,5 @@
.sort-icon {
width: 1em;
height: 1em;
display: inline-block;
}

90
app/portainer/components/datatables/components/TableHeaderCell.tsx Normal file
View File

@ -0,0 +1,90 @@
import clsx from 'clsx';
import { PropsWithChildren, ReactNode } from 'react';
import { TableHeaderProps } from 'react-table';
import { Button } from '@/portainer/components/Button';
import { useTableContext } from './TableContainer';
import styles from './TableHeaderCell.module.css';
interface Props {
canFilter: boolean;
canSort: boolean;
headerProps: TableHeaderProps;
isSorted: boolean;
isSortedDesc?: boolean;
onSortClick: (desc: boolean) => void;
render: () => ReactNode;
renderFilter: () => ReactNode;
}
export function TableHeaderCell({
headerProps: { className, role, style },
canSort,
render,
onSortClick,
isSorted,
isSortedDesc,
canFilter,
renderFilter,
}: Props) {
useTableContext();
return (
<th role={role} style={style} className={className}>
<SortWrapper
canSort={canSort}
onClick={onSortClick}
isSorted={isSorted}
isSortedDesc={isSortedDesc}
>
{render()}
</SortWrapper>
{canFilter ? renderFilter() : null}
</th>
);
}
interface SortWrapperProps {
canSort: boolean;
isSorted: boolean;
isSortedDesc?: boolean;
onClick: (desc: boolean) => void;
}
function SortWrapper({
canSort,
children,
onClick,
isSorted,
isSortedDesc,
}: PropsWithChildren<SortWrapperProps>) {
if (!canSort) {
return <>{children}</>;
}
return (
<Button
color="link"
type="button"
onClick={() => onClick(!isSortedDesc)}
className="sortable"
>
<span className="sortable-label">{children}</span>
{isSorted ? (
<i
className={clsx(
'fa',
'space-left',
isSortedDesc ? 'fa-sort-alpha-up' : 'fa-sort-alpha-down',
styles.sortIcon
)}
aria-hidden="true"
/>
) : (
<div className={styles.sortIcon} />
)}
</Button>
);
}

46
app/portainer/components/datatables/components/TableHeaderRow.tsx Normal file
View File

@ -0,0 +1,46 @@
import { HeaderGroup, TableHeaderProps } from 'react-table';
import { useTableContext } from './TableContainer';
import { TableHeaderCell } from './TableHeaderCell';
interface Props<D extends Record<string, unknown> = Record<string, unknown>> {
headers: HeaderGroup<D>[];
onSortChange(colId: string, desc: boolean): void;
}
export function TableHeaderRow<
D extends Record<string, unknown> = Record<string, unknown>
>({
headers,
onSortChange,
className,
role,
style,
}: Props<D> & TableHeaderProps) {
useTableContext();
return (
<tr className={className} role={role} style={style}>
{headers.map((column) => (
<TableHeaderCell
headerProps={{
...column.getHeaderProps({
className: column.className,
}),
}}
key={column.id}
canSort={column.canSort}
onSortClick={(desc) => {
column.toggleSortBy(desc);
onSortChange(column.id, desc);
}}
isSorted={column.isSorted}
isSortedDesc={column.isSortedDesc}
render={() => column.render('Header')}
canFilter={!column.disableFilters}
renderFilter={() => column.render('Filter')}
/>
))}
</tr>
);
}

35
app/portainer/components/datatables/components/TableRow.tsx Normal file
View File

@ -0,0 +1,35 @@
import { Cell, TableRowProps } from 'react-table';
import { useTableContext } from './TableContainer';
interface Props<D extends Record<string, unknown> = Record<string, unknown>>
extends TableRowProps {
cells: Cell<D>[];
}
export function TableRow<
D extends Record<string, unknown> = Record<string, unknown>
>({ cells, className, role, style }: Props<D>) {
useTableContext();
return (
<tr className={className} role={role} style={style}>
{cells.map((cell) => {
const cellProps = cell.getCellProps({
className: cell.className,
});
return (
<td
className={cellProps.className}
role={cellProps.role}
style={cellProps.style}
key={cellProps.key}
>
{cell.render('Cell')}
</td>
);
})}
</tr>
);
}

44
app/portainer/components/datatables/components/TableSettingsMenu.tsx Normal file
View File

@ -0,0 +1,44 @@
import clsx from 'clsx';
import { Menu, MenuButton, MenuList } from '@reach/menu-button';
import { PropsWithChildren, ReactNode } from 'react';
import { useTableContext } from './TableContainer';
interface Props {
quickActions: ReactNode;
}
export function TableSettingsMenu({
quickActions,
children,
}: PropsWithChildren<Props>) {
useTableContext();
return (
<Menu className="setting">
{({ isExpanded }) => (
<>
<MenuButton
className={clsx('table-setting-menu-btn', {
'setting-active': isExpanded,
})}
>
<i className="fa fa-cog" aria-hidden="true" /> Settings
</MenuButton>
<MenuList>
<div className="tableMenu">
<div className="menuHeader">Table settings</div>
<div className="menuContent">{children}</div>
{quickActions && (
<div>
<div className="menuHeader">Quick actions</div>
<div className="menuContent">{quickActions}</div>
</div>
)}
</div>
</MenuList>
</>
)}
</Menu>
);
}

9
app/portainer/components/datatables/components/TableSettingsMenuAutoRefresh.module.css Normal file
View File

@ -0,0 +1,9 @@
.alert-visible {
opacity: 1;
transition: all 250ms linear;
}
.alert-hidden {
opacity: 0;
transition: all 250ms ease-out 2s;
}

65
app/portainer/components/datatables/components/TableSettingsMenuAutoRefresh.tsx Normal file
View File

@ -0,0 +1,65 @@
import clsx from 'clsx';
import { useState } from 'react';
import { Checkbox } from '@/portainer/components/form-components/Checkbox';
import styles from './TableSettingsMenuAutoRefresh.module.css';
interface Props {
onChange(value: number): void;
value: number;
}
export function TableSettingsMenuAutoRefresh({ onChange, value }: Props) {
const [isCheckVisible, setIsCheckVisible] = useState(false);
const isEnabled = value > 0;
return (
<>
<Checkbox
id="settings-auto-refresh"
label="Auto refresh"
checked={isEnabled}
onChange={(e) => onChange(e.target.checked ? 10 : 0)}
/>
{isEnabled && (
<div>
<label htmlFor="settings_refresh_rate">Refresh rate</label>
<select
id="settings_refresh_rate"
className="small-select"
value={value}
onChange={(e) => handleChange(e.target.value)}
>
<option value={10}>10s</option>
<option value={30}>30s</option>
<option value={60}>1min</option>
<option value={120}>2min</option>
<option value={300}>5min</option>
</select>
<span
className={clsx(
isCheckVisible ? styles.alertVisible : styles.alertHidden,
styles.check
)}
onTransitionEnd={() => setIsCheckVisible(false)}
>
<i
id="refreshRateChange"
className="fa fa-check green-icon"
aria-hidden="true"
style={{ marginTop: '7px' }}
/>
</span>
</div>
)}
</>
);
function handleChange(value: string) {
onChange(Number(value));
setIsCheckVisible(true);
}
}

27
app/portainer/components/datatables/components/TableTitle.tsx Normal file
View File

@ -0,0 +1,27 @@
import clsx from 'clsx';
import { PropsWithChildren } from 'react';
import { useTableContext } from './TableContainer';
interface Props {
icon: string;
label: string;
}
export function TableTitle({
icon,
label,
children,
}: PropsWithChildren<Props>) {
useTableContext();
return (
<div className="toolBar">
<div className="toolBarTitle">
<i className={clsx('space-right', 'fa', icon)} aria-hidden="true" />
{label}
</div>
{children}
</div>
);
}

9
app/portainer/components/datatables/components/TableTitleActions.tsx Normal file
View File

@ -0,0 +1,9 @@
import { PropsWithChildren } from 'react';
import { useTableContext } from './TableContainer';
export function TableTitleActions({ children }: PropsWithChildren<unknown>) {
useTableContext();
return <div className="settings">{children}</div>;
}

14
app/portainer/components/datatables/components/filter-types.ts Normal file
View File

@ -0,0 +1,14 @@
import { Row } from 'react-table';
export function multiple<
D extends Record<string, unknown> = Record<string, unknown>
>(rows: Row<D>[], columnIds: string[], filterValue: string[] = []) {
if (filterValue.length === 0 || columnIds.length === 0) {
return rows;
}
return rows.filter((row) => {
const value = row.values[columnIds[0]];
return filterValue.includes(value);
});
}

9
app/portainer/components/datatables/components/index.tsx Normal file
View File

@ -0,0 +1,9 @@
export { Table } from './Table';
export { TableActions } from './TableActions';
export { TableTitleActions } from './TableTitleActions';
export { TableHeaderCell } from './TableHeaderCell';
export { TableSettingsMenu } from './TableSettingsMenu';
export { TableTitle } from './TableTitle';
export { TableContainer } from './TableContainer';
export { TableHeaderRow } from './TableHeaderRow';
export { TableRow } from './TableRow';

42
app/portainer/components/datatables/components/useRepeater.ts Normal file
View File

@ -0,0 +1,42 @@
import { useEffect, useCallback, useState } from 'react';
export function useRepeater(
refreshRate: number,
onRefresh: () => Promise<void>
) {
const [intervalId, setIntervalId] = useState<NodeJS.Timeout | null>(null);
const stopRepeater = useCallback(() => {
if (!intervalId) {
return;
}
clearInterval(intervalId);
setIntervalId(null);
}, [intervalId]);
const startRepeater = useCallback(
(refreshRate) => {
if (intervalId) {
return;
}
setIntervalId(
setInterval(async () => {
await onRefresh();
}, refreshRate * 1000)
);
},
[intervalId]
);
useEffect(() => {
if (!refreshRate) {
stopRepeater();
} else {
startRepeater(refreshRate);
}
return stopRepeater;
}, [refreshRate, startRepeater, stopRepeater, intervalId]);
}

478
app/portainer/components/datatables/components/useRowSelect.ts Normal file
View File

@ -0,0 +1,478 @@
/* eslint no-param-reassign: ["error", { "props": false }] */
import { ChangeEvent, useCallback, useMemo } from 'react';
import {
actions,
makePropGetter,
ensurePluginOrder,
useGetLatest,
useMountedLayoutEffect,
Hooks,
TableInstance,
TableState,
ActionType,
ReducerTableState,
IdType,
Row,
PropGetter,
TableToggleRowsSelectedProps,
TableToggleAllRowsSelectedProps,
} from 'react-table';
type DefaultType = Record<string, unknown>;
interface UseRowSelectTableInstance<D extends DefaultType = DefaultType>
extends TableInstance<D> {
isAllRowSelected: boolean;
selectSubRows: boolean;
getSubRows(row: Row<D>): Row<D>[];
isRowSelectable(row: Row<D>): boolean;
}
const pluginName = 'useRowSelect';
// Actions
actions.resetSelectedRows = 'resetSelectedRows';
actions.toggleAllRowsSelected = 'toggleAllRowsSelected';
actions.toggleRowSelected = 'toggleRowSelected';
actions.toggleAllPageRowsSelected = 'toggleAllPageRowsSelected';
export function useRowSelect<D extends DefaultType>(hooks: Hooks<D>) {
hooks.getToggleRowSelectedProps = [
defaultGetToggleRowSelectedProps as PropGetter<
D,
TableToggleRowsSelectedProps
>,
];
hooks.getToggleAllRowsSelectedProps = [
defaultGetToggleAllRowsSelectedProps as PropGetter<
D,
TableToggleAllRowsSelectedProps
>,
];
hooks.getToggleAllPageRowsSelectedProps = [
defaultGetToggleAllPageRowsSelectedProps as PropGetter<
D,
TableToggleAllRowsSelectedProps
>,
];
hooks.stateReducers.push(
reducer as (
newState: TableState<D>,
action: ActionType,
previousState?: TableState<D>,
instance?: TableInstance<D>
) => ReducerTableState<D> | undefined
);
hooks.useInstance.push(useInstance as (instance: TableInstance<D>) => void);
hooks.prepareRow.push(prepareRow);
}
useRowSelect.pluginName = pluginName;
function defaultGetToggleRowSelectedProps<D extends DefaultType>(
props: D,
{ instance, row }: { instance: UseRowSelectTableInstance<D>; row: Row<D> }
) {
const { manualRowSelectedKey = 'isSelected' } = instance;
let checked = false;
if (row.original && row.original[manualRowSelectedKey]) {
checked = true;
} else {
checked = row.isSelected;
}
return [
props,
{
onChange: (e: ChangeEvent<HTMLInputElement>) => {
row.toggleRowSelected(e.target.checked);
},
style: {
cursor: 'pointer',
},
checked,
title: 'Toggle Row Selected',
indeterminate: row.isSomeSelected,
disabled: !instance.isRowSelectable(row),
},
];
}
function defaultGetToggleAllRowsSelectedProps<D extends DefaultType>(
props: D,
{ instance }: { instance: UseRowSelectTableInstance<D> }
) {
return [
props,
{
onChange: (e: ChangeEvent<HTMLInputElement>) => {
instance.toggleAllRowsSelected(e.target.checked);
},
style: {
cursor: 'pointer',
},
checked: instance.isAllRowsSelected,
title: 'Toggle All Rows Selected',
indeterminate: Boolean(
!instance.isAllRowsSelected &&
Object.keys(instance.state.selectedRowIds).length
),
},
];
}
function defaultGetToggleAllPageRowsSelectedProps<D extends DefaultType>(
props: D,
{ instance }: { instance: UseRowSelectTableInstance<D> }
) {
return [
props,
{
onChange(e: ChangeEvent<HTMLInputElement>) {
instance.toggleAllPageRowsSelected(e.target.checked);
},
style: {
cursor: 'pointer',
},
checked: instance.isAllPageRowsSelected,
title: 'Toggle All Current Page Rows Selected',
indeterminate: Boolean(
!instance.isAllPageRowsSelected &&
instance.page.some(({ id }) => instance.state.selectedRowIds[id])
),
},
];
}
function reducer<D extends Record<string, unknown>>(
state: TableState<D>,
action: ActionType,
_previousState?: TableState<D>,
instance?: UseRowSelectTableInstance<D>
) {
if (action.type === actions.init) {
return {
...state,
selectedRowIds: <Record<IdType<D>, boolean>>{},
};
}
if (action.type === actions.resetSelectedRows) {
return {
...state,
selectedRowIds: instance?.initialState.selectedRowIds || {},
};
}
if (action.type === actions.toggleAllRowsSelected) {
const { value: setSelected } = action;
if (!instance) {
return state;
}
const {
isAllRowsSelected,
rowsById,
nonGroupedRowsById = rowsById,
isRowSelectable = defaultIsRowSelectable,
} = instance;
const selectAll =
typeof setSelected !== 'undefined' ? setSelected : !isAllRowsSelected;
// Only remove/add the rows that are visible on the screen
// Leave all the other rows that are selected alone.
const selectedRowIds = { ...state.selectedRowIds };
Object.keys(nonGroupedRowsById).forEach((rowId: IdType<D>) => {
if (selectAll) {
const row = rowsById[rowId];
if (isRowSelectable(row)) {
selectedRowIds[rowId] = true;
}
} else {
delete selectedRowIds[rowId];
}
});
return {
...state,
selectedRowIds,
};
}
if (action.type === actions.toggleRowSelected) {
if (!instance) {
return state;
}
const { id, value: setSelected } = action;
const {
rowsById,
selectSubRows = true,
getSubRows,
isRowSelectable = defaultIsRowSelectable,
} = instance;
const isSelected = state.selectedRowIds[id];
const shouldExist =
typeof setSelected !== 'undefined' ? setSelected : !isSelected;
if (isSelected === shouldExist) {
return state;
}
const newSelectedRowIds = { ...state.selectedRowIds };
// eslint-disable-next-line no-inner-declarations
function handleRowById(id: IdType<D>) {
const row = rowsById[id];
if (!isRowSelectable(row)) {
return;
}
if (!row.isGrouped) {
if (shouldExist) {
newSelectedRowIds[id] = true;
} else {
delete newSelectedRowIds[id];
}
}
if (selectSubRows && getSubRows(row)) {
getSubRows(row).forEach((row) => handleRowById(row.id));
}
}
handleRowById(id);
return {
...state,
selectedRowIds: newSelectedRowIds,
};
}
if (action.type === actions.toggleAllPageRowsSelected) {
if (!instance) {
return state;
}
const { value: setSelected } = action;
const {
page,
rowsById,
selectSubRows = true,
isAllPageRowsSelected,
getSubRows,
} = instance;
const selectAll =
typeof setSelected !== 'undefined' ? setSelected : !isAllPageRowsSelected;
const newSelectedRowIds = { ...state.selectedRowIds };
// eslint-disable-next-line no-inner-declarations
function handleRowById(id: IdType<D>) {
const row = rowsById[id];
if (!row.isGrouped) {
if (selectAll) {
newSelectedRowIds[id] = true;
} else {
delete newSelectedRowIds[id];
}
}
if (selectSubRows && getSubRows(row)) {
getSubRows(row).forEach((row) => handleRowById(row.id));
}
}
page.forEach((row) => handleRowById(row.id));
return {
...state,
selectedRowIds: newSelectedRowIds,
};
}
return state;
}
function useInstance<D extends Record<string, unknown>>(
instance: UseRowSelectTableInstance<D>
) {
const {
data,
rows,
getHooks,
plugins,
rowsById,
nonGroupedRowsById = rowsById,
autoResetSelectedRows = true,
state: { selectedRowIds },
selectSubRows = true,
dispatch,
page,
getSubRows,
isRowSelectable,
} = instance;
ensurePluginOrder(
plugins,
['useFilters', 'useGroupBy', 'useSortBy', 'useExpanded', 'usePagination'],
'useRowSelect'
);
const selectedFlatRows = useMemo(() => {
const selectedFlatRows = <Array<Row<D>>>[];
rows.forEach((row) => {
const isSelected = selectSubRows
? getRowIsSelected(row, selectedRowIds, getSubRows)
: !!selectedRowIds[row.id];
row.isSelected = !!isSelected;
row.isSomeSelected = isSelected === null;
if (isSelected) {
selectedFlatRows.push(row);
}
});
return selectedFlatRows;
}, [rows, selectSubRows, selectedRowIds, getSubRows]);
let isAllRowsSelected = Boolean(
Object.keys(nonGroupedRowsById).length && Object.keys(selectedRowIds).length
);
let isAllPageRowsSelected = isAllRowsSelected;
if (isAllRowsSelected) {
if (
Object.keys(nonGroupedRowsById).some((id) => {
const row = rowsById[id];
return !selectedRowIds[id] && isRowSelectable(row);
})
) {
isAllRowsSelected = false;
}
}
if (!isAllRowsSelected) {
if (
page &&
page.length &&
page.some(({ id }) => {
const row = rowsById[id];
return !selectedRowIds[id] && isRowSelectable(row);
})
) {
isAllPageRowsSelected = false;
}
}
const getAutoResetSelectedRows = useGetLatest(autoResetSelectedRows);
useMountedLayoutEffect(() => {
if (getAutoResetSelectedRows()) {
dispatch({ type: actions.resetSelectedRows });
}
}, [dispatch, data]);
const toggleAllRowsSelected = useCallback(
(value) => dispatch({ type: actions.toggleAllRowsSelected, value }),
[dispatch]
);
const toggleAllPageRowsSelected = useCallback(
(value) => dispatch({ type: actions.toggleAllPageRowsSelected, value }),
[dispatch]
);
const toggleRowSelected = useCallback(
(id, value) => dispatch({ type: actions.toggleRowSelected, id, value }),
[dispatch]
);
const getInstance = useGetLatest(instance);
const getToggleAllRowsSelectedProps = makePropGetter(
getHooks().getToggleAllRowsSelectedProps,
{ instance: getInstance() }
);
const getToggleAllPageRowsSelectedProps = makePropGetter(
getHooks().getToggleAllPageRowsSelectedProps,
{ instance: getInstance() }
);
Object.assign(instance, {
selectedFlatRows,
isAllRowsSelected,
isAllPageRowsSelected,
toggleRowSelected,
toggleAllRowsSelected,
getToggleAllRowsSelectedProps,
getToggleAllPageRowsSelectedProps,
toggleAllPageRowsSelected,
});
}
function prepareRow<D extends Record<string, unknown>>(
row: Row<D>,
{ instance }: { instance: TableInstance<D> }
) {
row.toggleRowSelected = (set) => instance.toggleRowSelected(row.id, set);
row.getToggleRowSelectedProps = makePropGetter(
instance.getHooks().getToggleRowSelectedProps,
{ instance, row }
);
}
function getRowIsSelected<D extends Record<string, unknown>>(
row: Row<D>,
selectedRowIds: Record<IdType<D>, boolean>,
getSubRows: (row: Row<D>) => Array<Row<D>>
) {
if (selectedRowIds[row.id]) {
return true;
}
const subRows = getSubRows(row);
if (subRows && subRows.length) {
let allChildrenSelected = true;
let someSelected = false;
subRows.forEach((subRow) => {
// Bail out early if we know both of these
if (someSelected && !allChildrenSelected) {
return;
}
if (getRowIsSelected(subRow, selectedRowIds, getSubRows)) {
someSelected = true;
} else {
allChildrenSelected = false;
}
});
if (allChildrenSelected) {
return true;
}
return someSelected ? null : false;
}
return false;
}
function defaultIsRowSelectable<D extends DefaultType>(row: Row<D>) {
return !!row.original.disabled;
}

77
app/portainer/components/datatables/components/useTableSettings.tsx Normal file
View File

@ -0,0 +1,77 @@
import { Context, createContext, ReactNode, useContext, useState } from 'react';
import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
export interface TableSettingsContextInterface<T> {
settings: T;
setTableSettings(partialSettings: Partial<T>): void;
setTableSettings(mutation: (settings: T) => T): void;
}
const TableSettingsContext = createContext<TableSettingsContextInterface<
Record<string, unknown>
> | null>(null);
export function useTableSettings<T>() {
const Context = getContextType<T>();
const context = useContext(Context);
if (context === null) {
throw new Error('must be nested under TableSettingsProvider');
}
return context;
}
interface ProviderProps<T> {
children: ReactNode;
defaults?: T;
storageKey: string;
}
export function TableSettingsProvider<T>({
children,
defaults,
storageKey,
}: ProviderProps<T>) {
const Context = getContextType<T>();
const [storage, setStorage] = useLocalStorage<T>(
keyBuilder(storageKey),
defaults as T
);
const [settings, setTableSettings] = useState(storage);
return (
<Context.Provider value={{ settings, setTableSettings: handleChange }}>
{children}
</Context.Provider>
);
function handleChange(partialSettings: T): void;
function handleChange(mutation: (settings: T) => T): void;
function handleChange(mutation: T | ((settings: T) => T)): void {
setTableSettings((settings) => {
const newTableSettings =
mutation instanceof Function
? mutation(settings)
: { ...settings, ...mutation };
setStorage(newTableSettings);
return newTableSettings;
});
}
function keyBuilder(key: string) {
return `datatable_TableSettings_${key}`;
}
}
function getContextType<T>() {
return (TableSettingsContext as unknown) as Context<
TableSettingsContextInterface<T>
>;
}

26
app/portainer/components/datatables/datatable.css
View File

@ -126,6 +126,10 @@
color: #767676;
cursor: pointer;
font-size: 12px !important;
background: none;
border: none;
padding: 0;
margin: 0;
}
.widget .widget-body table thead th .filter-active {
@ -252,3 +256,25 @@
transform: scale(0);
width: 8px;
}
.table th.selection,
.table td.selection {
width: 30px;
}
.table th button.sortable {
background: none;
border: none;
padding: 0;
margin: 0;
color: var(--text-link-color);
}
.table th button.sortable:hover .sortable-label {
text-decoration: underline;
}
.datatable .table-setting-menu-btn {
border: none;
background: none;
}

57
app/portainer/components/form-components/Checkbox.tsx Normal file
View File

@ -0,0 +1,57 @@
import {
forwardRef,
useRef,
useEffect,
MutableRefObject,
ChangeEventHandler,
HTMLProps,
} from 'react';
interface Props extends HTMLProps<HTMLInputElement> {
checked?: boolean;
indeterminate?: boolean;
title?: string;
label?: string;
id: string;
className?: string;
role?: string;
onChange?: ChangeEventHandler<HTMLInputElement>;
}
export const Checkbox = forwardRef<HTMLInputElement, Props>(
(
{ indeterminate, title, label, id, checked, onChange, ...props }: Props,
ref
) => {
const defaultRef = useRef<HTMLInputElement>(null);
let resolvedRef = ref as MutableRefObject<HTMLInputElement | null>;
if (!ref) {
resolvedRef = defaultRef;
}
useEffect(() => {
if (resolvedRef === null || resolvedRef.current === null) {
return;
}
if (typeof indeterminate !== 'undefined') {
resolvedRef.current.indeterminate = indeterminate;
}
}, [resolvedRef, indeterminate]);
return (
<div className="md-checkbox" title={title || label}>
<input
id={id}
type="checkbox"
ref={resolvedRef}
onChange={onChange}
checked={checked}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
<label htmlFor={id}>{label}</label>
</div>
);
}
);

26
app/portainer/components/pagination-controls/ItemsPerPageSelector.tsx Normal file
View File

@ -0,0 +1,26 @@
interface Props {
value: number;
onChange(value: number): void;
showAll: boolean;
}
export function ItemsPerPageSelector({ value, onChange, showAll }: Props) {
return (
<span className="limitSelector">
<span className="space-right">Items per page</span>
<select
className="form-control"
value={value}
onChange={(e) => onChange(Number(e.target.value))}
data-cy="paginationSelect"
>
{showAll ? <option value={Number.MAX_SAFE_INTEGER}>All</option> : null}
{[10, 25, 50, 100].map((v) => (
<option value={v} key={v}>
{v}
</option>
))}
</select>
</span>
);
}

29
app/portainer/components/pagination-controls/PageButton.tsx Normal file
View File

@ -0,0 +1,29 @@
import clsx from 'clsx';
import { ReactNode } from 'react';
interface Props {
active?: boolean;
children: ReactNode;
disabled?: boolean;
onPageChange(page: number): void;
page: number | '...';
}
export function PageButton({
children,
page,
disabled,
active,
onPageChange,
}: Props) {
return (
<li className={clsx({ disabled, active })}>
<button
type="button"
onClick={() => typeof page === 'number' && onPageChange(page)}
>
{children}
</button>
</li>
);
}

87
app/portainer/components/pagination-controls/PageSelector.tsx Normal file
View File

@ -0,0 +1,87 @@
import { generatePagesArray } from './generatePagesArray';
import { PageButton } from './PageButton';
interface Props {
boundaryLinks?: boolean;
currentPage: number;
directionLinks?: boolean;
itemsPerPage: number;
onPageChange(page: number): void;
totalCount: number;
maxSize: number;
}
export function PageSelector({
currentPage,
totalCount,
itemsPerPage,
onPageChange,
maxSize = 5,
directionLinks = true,
boundaryLinks = false,
}: Props) {
const pages = generatePagesArray(
currentPage,
totalCount,
itemsPerPage,
maxSize
);
const last = pages[pages.length - 1];
if (pages.length <= 1) {
return null;
}
return (
<ul className="pagination">
{boundaryLinks ? (
<PageButton
onPageChange={onPageChange}
page={1}
disabled={currentPage === 1}
>
&laquo;
</PageButton>
) : null}
{directionLinks ? (
<PageButton
onPageChange={onPageChange}
page={currentPage - 1}
disabled={currentPage === 1}
>
&lsaquo;
</PageButton>
) : null}
{pages.map((pageNumber, index) => (
<PageButton
onPageChange={onPageChange}
page={pageNumber}
disabled={pageNumber === '...'}
active={currentPage === pageNumber}
key={index}
>
{pageNumber}
</PageButton>
))}
{directionLinks ? (
<PageButton
onPageChange={onPageChange}
page={currentPage + 1}
disabled={currentPage === last}
>
&rsaquo;
</PageButton>
) : null}
{boundaryLinks ? (
<PageButton
disabled={currentPage === last}
onPageChange={onPageChange}
page={last}
>
&raquo;
</PageButton>
) : null}
</ul>
);
}

46
app/portainer/components/pagination-controls/PaginationControls.tsx Normal file
View File

@ -0,0 +1,46 @@
import { ItemsPerPageSelector } from './ItemsPerPageSelector';
import { PageSelector } from './PageSelector';
interface Props {
onPageChange(page: number): void;
onPageLimitChange(value: number): void;
page: number;
pageLimit: number;
showAll: boolean;
totalCount: number;
}
export function PaginationControls({
pageLimit,
page,
onPageLimitChange,
showAll,
onPageChange,
totalCount,
}: Props) {
return (
<div className="paginationControls">
<form className="form-inline">
<ItemsPerPageSelector
value={pageLimit}
onChange={handlePageLimitChange}
showAll={showAll}
/>
{pageLimit !== 0 && (
<PageSelector
maxSize={5}
onPageChange={onPageChange}
currentPage={page}
itemsPerPage={pageLimit}
totalCount={totalCount}
/>
)}
</form>
</div>
);
function handlePageLimitChange(value: number) {
onPageLimitChange(value);
onPageChange(1);
}
}

37
app/portainer/components/pagination-controls/calculatePageNumber.ts Normal file
View File

@ -0,0 +1,37 @@
/**
* Given the position in the sequence of pagination links, figure out what page number corresponds to that position.
*
* @param position
* @param currentPage
* @param paginationRange
* @param totalPages
*/
export function calculatePageNumber(
position: number,
currentPage: number,
paginationRange: number,
totalPages: number
) {
const halfWay = Math.ceil(paginationRange / 2);
if (position === paginationRange) {
return totalPages;
}
if (position === 1) {
return position;
}
if (paginationRange < totalPages) {
if (totalPages - halfWay < currentPage) {
return totalPages - paginationRange + position;
}
if (halfWay < currentPage) {
return currentPage - halfWay + position;
}
return position;
}
return position;
}

55
app/portainer/components/pagination-controls/generatePagesArray.ts Normal file
View File

@ -0,0 +1,55 @@
import { calculatePageNumber } from './calculatePageNumber';
export /**
* Generate an array of page numbers (or the '...' string) which is used in an ng-repeat to generate the
* links used in pagination
*
* @param currentPage
* @param rowsPerPage
* @param paginationRange
* @param collectionLength
* @returns {Array}
*/
function generatePagesArray(
currentPage: number,
collectionLength: number,
rowsPerPage: number,
paginationRange: number
): (number | '...')[] {
const pages: (number | '...')[] = [];
const totalPages = Math.ceil(collectionLength / rowsPerPage);
const halfWay = Math.ceil(paginationRange / 2);
let position;
if (currentPage <= halfWay) {
position = 'start';
} else if (totalPages - halfWay < currentPage) {
position = 'end';
} else {
position = 'middle';
}
const ellipsesNeeded = paginationRange < totalPages;
for (let i = 1; i <= totalPages && i <= paginationRange; i += 1) {
const pageNumber = calculatePageNumber(
i,
currentPage,
paginationRange,
totalPages
);
const openingEllipsesNeeded =
i === 2 && (position === 'middle' || position === 'end');
const closingEllipsesNeeded =
i === paginationRange - 1 &&
(position === 'middle' || position === 'start');
if (ellipsesNeeded && (openingEllipsesNeeded || closingEllipsesNeeded)) {
pages.push('...');
} else {
pages.push(pageNumber);
}
}
return pages;
}

3
app/portainer/components/pagination-controls/index.ts Normal file
View File

@ -0,0 +1,3 @@
import './pagination-controls.css';
export { PaginationControls } from './PaginationControls';

72
app/portainer/components/pagination-controls/pagination-controls.css Normal file
View File

@ -0,0 +1,72 @@
.pagination-controls {
margin-left: 10px;
}
.paginationControls form.form-inline {
display: flex;
}
.pagination > li:first-child > button {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > button,
.pagination > .disabled > button:hover,
.pagination > .disabled > button:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: var(--text-pagination-color);
background-color: var(--bg-pagination-color);
border-color: var(--border-pagination-color);
}
.pagination > li > button {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px !important;
line-height: 1.42857143;
text-decoration: none;
border: 1px solid #ddd;
}
.pagination > li > a,
.pagination > li > button,
.pagination > li > span {
background-color: var(--bg-pagination-span-color);
border-color: var(--border-pagination-span-color);
color: var(--text-pagination-span-color);
}
.pagination > li > a:hover,
.pagination > li > button:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > button:focus,
.pagination > li > span:focus {
background-color: var(--bg-pagination-hover-color);
border-color: var(--border-pagination-hover-color);
color: var(--text-pagination-span-hover-color);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > button,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > button:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.pagination > .active > button:focus {
z-index: 3;
color: #fff;
cursor: default;
background-color: var(--text-pagination-span-color);
border-color: var(--text-pagination-span-color);
}

12
app/portainer/environments/types.ts Normal file
View File

@ -0,0 +1,12 @@
export type EnvironmentId = number;
export enum EnvironmentStatus {
Up = 1,
Down = 2,
}
export interface Environment {
Id: EnvironmentId;
Status: EnvironmentStatus;
PublicURL: string;
}

27
app/portainer/environments/useEnvironment.tsx Normal file
View File

@ -0,0 +1,27 @@
import { createContext, ReactNode, useContext } from 'react';
import type { Environment } from './types';
const EnvironmentContext = createContext<Environment | null>(null);
export function useEnvironment() {
const context = useContext(EnvironmentContext);
if (context === null) {
throw new Error('must be nested under EnvironmentProvider');
}
return context;
}
interface Props {
children: ReactNode;
environment: Environment;
}
export function EnvironmentProvider({ children, environment }: Props) {
return (
<EnvironmentContext.Provider value={environment}>
{children}
</EnvironmentContext.Provider>
);
}

6
app/portainer/error.js
View File

@ -1,6 +0,0 @@
export default class PortainerError {
constructor(msg, err) {
this.msg = msg;
this.err = err;
}
}

8
app/portainer/error.ts Normal file
View File

@ -0,0 +1,8 @@
export default class PortainerError extends Error {
err?: Error;
constructor(msg: string, err?: Error) {
super(msg);
this.err = err;
}
}

15
app/portainer/hooks/useDebounce.ts Normal file
View File

@ -0,0 +1,15 @@
import { useEffect, useState } from 'react';
export function useDebounce<T>(value: T, delay = 500): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay);
return () => {
clearTimeout(timer);
};
}, [value, delay]);
return debouncedValue;
}

7
app/portainer/hooks/useUser.tsx
View File

@ -71,13 +71,10 @@ interface AuthorizedProps {
children: ReactNode;
}
export function Authorized({
authorizations,
children,
}: AuthorizedProps): ReactNode {
export function Authorized({ authorizations, children }: AuthorizedProps) {
const isAllowed = useAuthorizations(authorizations);
return isAllowed ? children : null;
return isAllowed ? <>{children}</> : null;
}
interface UserProviderProps {

156
app/react-table-config.d.ts vendored Normal file
View File

@ -0,0 +1,156 @@
import {
UseColumnOrderInstanceProps,
UseColumnOrderState,
UseExpandedHooks,
UseExpandedInstanceProps,
UseExpandedOptions,
UseExpandedRowProps,
UseExpandedState,
UseFiltersColumnOptions,
UseFiltersColumnProps,
UseFiltersInstanceProps,
UseFiltersOptions,
UseFiltersState,
UseGlobalFiltersColumnOptions,
UseGlobalFiltersInstanceProps,
UseGlobalFiltersOptions,
UseGlobalFiltersState,
UseGroupByCellProps,
UseGroupByColumnOptions,
UseGroupByColumnProps,
UseGroupByHooks,
UseGroupByInstanceProps,
UseGroupByOptions,
UseGroupByRowProps,
UseGroupByState,
UsePaginationInstanceProps,
UsePaginationOptions,
UsePaginationState,
UseResizeColumnsColumnOptions,
UseResizeColumnsColumnProps,
UseResizeColumnsOptions,
UseResizeColumnsState,
UseRowSelectHooks,
UseRowSelectInstanceProps,
UseRowSelectOptions,
UseRowSelectRowProps,
UseRowSelectState,
UseRowStateCellProps,
UseRowStateInstanceProps,
UseRowStateOptions,
UseRowStateRowProps,
UseRowStateState,
UseSortByColumnOptions,
UseSortByColumnProps,
UseSortByHooks,
UseSortByInstanceProps,
UseSortByOptions,
UseSortByState,
} from 'react-table';
import { UseSelectColumnTableOptions } from '@lineup-lite/hooks';
declare module 'react-table' {
// take this file as-is, or comment out the sections that don't apply to your plugin configuration
export interface TableOptions<D extends Record<string, unknown>>
extends UseExpandedOptions<D>,
UseFiltersOptions<D>,
UseGlobalFiltersOptions<D>,
UseGroupByOptions<D>,
UsePaginationOptions<D>,
UseResizeColumnsOptions<D>,
UseRowSelectOptions<D>,
UseRowStateOptions<D>,
UseSortByOptions<D>,
UseSelectColumnTableOptions<D>,
// note that having Record here allows you to add anything to the options, this matches the spirit of the
// underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
// feature set, this is a safe default.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Record<string, any> {}
export interface Hooks<
D extends Record<string, unknown> = Record<string, unknown>
>
extends UseExpandedHooks<D>,
UseGroupByHooks<D>,
UseRowSelectHooks<D>,
UseSortByHooks<D> {}
export interface TableInstance<
D extends Record<string, unknown> = Record<string, unknown>
>
extends UseColumnOrderInstanceProps<D>,
UseExpandedInstanceProps<D>,
UseFiltersInstanceProps<D>,
UseGlobalFiltersInstanceProps<D>,
UseGroupByInstanceProps<D>,
UsePaginationInstanceProps<D>,
UseRowSelectInstanceProps<D>,
UseRowStateInstanceProps<D>,
UseSortByInstanceProps<D> {}
export interface TableState<
D extends Record<string, unknown> = Record<string, unknown>
>
extends UseColumnOrderState<D>,
UseExpandedState<D>,
UseFiltersState<D>,
UseGlobalFiltersState<D>,
UseGroupByState<D>,
UsePaginationState<D>,
UseResizeColumnsState<D>,
UseRowSelectState<D>,
UseRowStateState<D>,
UseSortByState<D> {}
export interface ColumnInterface<
D extends Record<string, unknown> = Record<string, unknown>
>
extends UseFiltersColumnOptions<D>,
UseGlobalFiltersColumnOptions<D>,
UseGroupByColumnOptions<D>,
UseResizeColumnsColumnOptions<D>,
UseSortByColumnOptions<D> {
className?: string;
canHide?: boolean;
}
export interface ColumnInstance<
D extends Record<string, unknown> = Record<string, unknown>
>
extends UseFiltersColumnProps<D>,
UseGroupByColumnProps<D>,
UseResizeColumnsColumnProps<D>,
UseSortByColumnProps<D> {
className?: string;
}
export interface Cell<
D extends Record<string, unknown> = Record<string, unknown>,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
V = any
>
extends UseTableCellProps<D, V>,
UseGroupByCellProps<D>,
UseRowStateCellProps<D> {
className?: string;
}
export interface Row<
D extends Record<string, unknown> = Record<string, unknown>
>
extends UseExpandedRowProps<D>,
UseGroupByRowProps<D>,
UseRowSelectRowProps<D>,
UseRowStateRowProps<D> {}
export function makePropGetter(
hooks: Array<PropGetter>,
...meta: Record<string, unknown>[]
): PropGetter;
export interface TableToggleRowsSelectedProps {
disabled: boolean;
}
}

5
package.json
View File

@ -66,7 +66,9 @@
"dependencies": {
"@aws-crypto/sha256-js": "^2.0.0",
"@fortawesome/fontawesome-free": "^5.15.4",
"@lineup-lite/hooks": "^1.6.0",
"@nxmix/tokenize-ansi": "^3.0.0",
"@reach/menu-button": "^0.16.1",
"@uirouter/angularjs": "1.0.11",
"@uirouter/react": "^1.0.7",
"@uirouter/react-hybrid": "^1.0.4",
@ -113,7 +115,9 @@
"rc-slider": "^9.7.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-select": "^5.2.1",
"react-table": "^7.7.0",
"react-tooltip": "^4.2.21",
"sanitize-html": "^2.5.3",
"spinkit": "^2.0.1",
@ -151,6 +155,7 @@
"@types/lodash-es": "^4.17.5",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@types/react-table": "^7.7.6",
"@types/sanitize-html": "^2.5.0",
"@types/toastr": "^2.1.39",
"@typescript-eslint/eslint-plugin": "^5.7.0",

141
yarn.lock
View File

@ -1705,6 +1705,21 @@
resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==
"@lineup-lite/components@~1.6.0":
version "1.6.0"
resolved "https://registry.yarnpkg.com/@lineup-lite/components/-/components-1.6.0.tgz#e1a9d368e1c3851f312a3e667e8f3eda52d9f0fc"
integrity sha512-DVif6MrAYBYLok5pUGtWBoVRxyCvb6ZOmGrLm3B4wxdo1lh2Gw8Io7cCsXfat2BdUsbtCJwUh9e+NbaqDWGNGA==
dependencies:
"@sgratzl/boxplots" "^1.2.2"
"@lineup-lite/hooks@^1.6.0":
version "1.6.0"
resolved "https://registry.yarnpkg.com/@lineup-lite/hooks/-/hooks-1.6.0.tgz#d4e7fbb6912b88e5bd31d98c52f183f11424f48d"
integrity sha512-PWWN9/va4TaCwx6wcE98swaCk385YQr7Bjgl7mnRvYNfP7m3JlHk7gASBQXNl6FLJrs98uyTOW032+OZwBYu5A==
dependencies:
"@lineup-lite/components" "~1.6.0"
date-fns "^2.21.3"
"@mdx-js/loader@^1.6.22":
version "1.6.22"
resolved "https://registry.npmjs.org/@mdx-js/loader/-/loader-1.6.22.tgz"
@ -1829,6 +1844,93 @@
resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz"
integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
"@reach/auto-id@0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.16.0.tgz#dfabc3227844e8c04f8e6e45203a8e14a8edbaed"
integrity sha512-5ssbeP5bCkM39uVsfQCwBBL+KT8YColdnMN5/Eto6Rj7929ql95R3HZUOkKIvj7mgPtEb60BLQxd1P3o6cjbmg==
dependencies:
"@reach/utils" "0.16.0"
tslib "^2.3.0"
"@reach/descendants@0.16.1":
version "0.16.1"
resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.16.1.tgz#fa3d89c0503565369707f32985d87eef61985d9f"
integrity sha512-3WZgRnD9O4EORKE31rrduJDiPFNMOjUkATx0zl192ZxMq3qITe4tUj70pS5IbJl/+v9zk78JwyQLvA1pL7XAPA==
dependencies:
"@reach/utils" "0.16.0"
tslib "^2.3.0"
"@reach/dropdown@0.16.1":
version "0.16.1"
resolved "https://registry.yarnpkg.com/@reach/dropdown/-/dropdown-0.16.1.tgz#0af4fd17e590ca852f6bb27f34d525f07510a326"
integrity sha512-56ITaEAWYFvEYSJz0RqFndrHIDhSuhmobmgB4Wy1q6Aj/3F20Bns1mGu61/ny5Ld8spgP1mJTJViacHsn7x/Dg==
dependencies:
"@reach/auto-id" "0.16.0"
"@reach/descendants" "0.16.1"
"@reach/popover" "0.16.0"
"@reach/utils" "0.16.0"
tslib "^2.3.0"
"@reach/menu-button@^0.16.1":
version "0.16.1"
resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.16.1.tgz#a81ab9d2ee21874bf8d957b29a388b8daa2b7cfd"
integrity sha512-0Oh/Oq+GupS48LuBdIu8VyMJFLlWReRAGgT24SrcAAxmlyO/qUP9KJS9D1CEvl2KUoSk2wO0Fu885E4eaBYucA==
dependencies:
"@reach/dropdown" "0.16.1"
"@reach/popover" "0.16.0"
"@reach/utils" "0.16.0"
prop-types "^15.7.2"
tiny-warning "^1.0.3"
tslib "^2.3.0"
"@reach/observe-rect@1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
"@reach/popover@0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.16.0.tgz#82c5ab96a88c49e2451a9c04b2d4392a9055f623"
integrity sha512-xmgiSyQwfshMkMNu6URbGrjjDTD3dnAITojvgEqfEtV1chDYqktKdDbIPrq+UGI54ey/IxbRpVzKcIjXiKoMmA==
dependencies:
"@reach/portal" "0.16.0"
"@reach/rect" "0.16.0"
"@reach/utils" "0.16.0"
tabbable "^4.0.0"
tslib "^2.3.0"
"@reach/portal@0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.16.0.tgz#1544531d978b770770b718b2872b35652a11e7e3"
integrity sha512-vXJ0O9T+72HiSEWHPs2cx7YbSO7pQsTMhgqPc5aaddIYpo2clJx1PnYuS0lSNlVaDO0IxQhwYq43evXaXnmviw==
dependencies:
"@reach/utils" "0.16.0"
tslib "^2.3.0"
"@reach/rect@0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.16.0.tgz#78cf6acefe2e83d3957fa84f938f6e1fc5700f16"
integrity sha512-/qO9jQDzpOCdrSxVPR6l674mRHNTqfEjkaxZHluwJ/2qGUtYsA0GSZiF/+wX/yOWeBif1ycxJDa6HusAMJZC5Q==
dependencies:
"@reach/observe-rect" "1.2.0"
"@reach/utils" "0.16.0"
prop-types "^15.7.2"
tiny-warning "^1.0.3"
tslib "^2.3.0"
"@reach/utils@0.16.0":
version "0.16.0"
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.16.0.tgz#5b0777cf16a7cab1ddd4728d5d02762df0ba84ce"
integrity sha512-PCggBet3qaQmwFNcmQ/GqHSefadAFyNCUekq9RrWoaU9hh/S4iaFgf2MBMdM47eQj5i/Bk0Mm07cP/XPFlkN+Q==
dependencies:
tiny-warning "^1.0.3"
tslib "^2.3.0"
"@sgratzl/boxplots@^1.2.2":
version "1.3.0"
resolved "https://registry.yarnpkg.com/@sgratzl/boxplots/-/boxplots-1.3.0.tgz#c9063d98e33a15f880cf4bd3531be71497e2a94e"
integrity sha512-2BRWv+WOH58pwzSgP50buoXgxQic+4auz3BF0wiIUXS8D3QGkdBNgsNdQO1754Tm/0uEwly0R3WaCiGnoYWcmA==
"@simbathesailor/use-what-changed@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@simbathesailor/use-what-changed/-/use-what-changed-2.0.0.tgz#7f82d78f92c8588b5fadd702065dde93bd781403"
@ -3103,9 +3205,9 @@
"@types/lodash" "*"
"@types/lodash@*":
version "4.14.176"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.176.tgz#641150fc1cda36fbfa329de603bbb175d7ee20c0"
integrity sha512-xZmuPTa3rlZoIbtDUyJKZQimJV3bxCmzMIO2c9Pz9afyDro6kr7R79GwcB6mRhuoPmV2p1Vb66WOJH7F886WKQ==
version "4.14.175"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.175.tgz#b78dfa959192b01fae0ad90e166478769b215f45"
integrity sha512-XmdEOrKQ8a1Y/yxQFOMbC47G/V2VDO1GvMRnl4O75M4GW/abC5tnfzadQYkqEveqRM1dEJGFFegfPNA2vvx2iw==
"@types/lodash@^4.14.175":
version "4.14.177"
@ -3211,6 +3313,13 @@
dependencies:
"@types/react" "*"
"@types/react-table@^7.7.6":
version "7.7.6"
resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.6.tgz#4899ccc46b4a1de08cc1daf120842e37e112e51e"
integrity sha512-ZMFHh1sG5AGDmhVRpz9mgGByGmBFAqnZ7QnyqGa5iAlKtcSC3vb/gul47lM0kJ1uvlawc+qN5k+++pe+GBdJ+g==
dependencies:
"@types/react" "*"
"@types/react-transition-group@^4.4.0":
version "4.4.4"
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
@ -6576,6 +6685,11 @@ data-urls@^2.0.0:
whatwg-mimetype "^2.3.0"
whatwg-url "^8.0.0"
date-fns@^2.21.3:
version "2.27.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.27.0.tgz#e1ff3c3ddbbab8a2eaadbb6106be2929a5a2d92b"
integrity sha512-sj+J0Mo2p2X1e306MHq282WS4/A8Pz/95GIFcsPNMPMZVI3EUrAdSv90al1k+p74WGLCruMXk23bfEDZa71X9Q==
dateformat@~1.0.12:
version "1.0.12"
resolved "https://registry.npmjs.org/dateformat/-/dateformat-1.0.12.tgz"
@ -12381,16 +12495,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4, mkdirp@~1.0.3, mkdirp@~1.0.4:
resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
moment@^2.10.2, moment@^2.29.1:
moment@^2.10.2, moment@^2.16.0, moment@^2.21.0, moment@^2.29.1:
version "2.29.1"
resolved "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
moment@^2.16.0:
version "2.27.0"
resolved "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz"
integrity sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"
@ -14665,6 +14774,11 @@ react-syntax-highlighter@^13.5.3:
prismjs "^1.21.0"
refractor "^3.1.0"
react-table@^7.7.0:
version "7.7.0"
resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912"
integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==
react-test-renderer@^17.0.2:
version "17.0.2"
resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz"
@ -16465,6 +16579,11 @@ synchronous-promise@^2.0.15:
resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
tabbable@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-4.0.0.tgz#5bff1d1135df1482cf0f0206434f15eadbeb9261"
integrity sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==
table@^3.7.8:
version "3.8.3"
resolved "https://registry.npmjs.org/table/-/table-3.8.3.tgz"
@ -16661,7 +16780,7 @@ timsort@^0.3.0:
resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tiny-warning@^1.0.2:
tiny-warning@^1.0.2, tiny-warning@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==