mirror of https://github.com/portainer/portainer
refactor(containers): replace containers datatable with react component [EE-1815] (#6059)
Chaim Lev-Ari
GitHub
parent
65821aaccc
commit
07e7fbd270
|
|
@ -88,6 +88,8 @@ overrides:
|
||||||
'jsx-a11y/label-has-associated-control': ['error', { 'assert': 'either' }]
|
'jsx-a11y/label-has-associated-control': ['error', { 'assert': 'either' }]
|
||||||
'react/function-component-definition': ['error', { 'namedComponents': 'function-declaration' }]
|
'react/function-component-definition': ['error', { 'namedComponents': 'function-declaration' }]
|
||||||
'react/jsx-no-bind': off
|
'react/jsx-no-bind': off
|
||||||
|
'no-await-in-loop': 'off'
|
||||||
|
'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }]
|
||||||
- files:
|
- files:
|
||||||
- app/**/*.test.*
|
- app/**/*.test.*
|
||||||
extends:
|
extends:
|
||||||
|
|
|
||||||
|
|
@ -82,6 +82,13 @@ input[type='checkbox'] {
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.md-checkbox input[type='checkbox']:indeterminate + label:before {
|
||||||
|
content: '-';
|
||||||
|
align-content: center;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
a[ng-click] {
|
a[ng-click] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -885,3 +892,7 @@ json-tree .branch-preview {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.space-x-1 {
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ import 'angular-loading-bar/build/loading-bar.css';
|
||||||
import 'angular-moment-picker/dist/angular-moment-picker.min.css';
|
import 'angular-moment-picker/dist/angular-moment-picker.min.css';
|
||||||
import 'angular-multiselect/isteven-multi-select.css';
|
import 'angular-multiselect/isteven-multi-select.css';
|
||||||
import 'spinkit/spinkit.min.css';
|
import 'spinkit/spinkit.min.css';
|
||||||
|
import '@reach/menu-button/styles.css';
|
||||||
|
|
||||||
import './rdash.css';
|
import './rdash.css';
|
||||||
import './app.css';
|
import './app.css';
|
||||||
|
|
|
||||||
|
|
@ -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',
|
'$stateRegistryProvider',
|
||||||
function ($stateRegistryProvider) {
|
function ($stateRegistryProvider) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
.root {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
@ -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']
|
||||||
|
);
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
angular.module('portainer.docker').component('containerQuickActions', {
|
|
||||||
templateUrl: './containerQuickActions.html',
|
|
||||||
bindings: {
|
|
||||||
containerId: '<',
|
|
||||||
nodeName: '<',
|
|
||||||
status: '<',
|
|
||||||
state: '<',
|
|
||||||
taskId: '<',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import angular from 'angular';
|
||||||
|
|
||||||
|
import { ContainerQuickActionsAngular } from './ContainerQuickActions';
|
||||||
|
|
||||||
|
angular
|
||||||
|
.module('portainer.docker')
|
||||||
|
.component('containerQuickActions', ContainerQuickActionsAngular);
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
angular.module('portainer.docker').component('containersDatatableActions', {
|
|
||||||
templateUrl: './containersDatatableActions.html',
|
|
||||||
controller: 'ContainersDatatableActionsController',
|
|
||||||
bindings: {
|
|
||||||
selectedItems: '=',
|
|
||||||
selectedItemCount: '=',
|
|
||||||
noStoppedItemsSelected: '=',
|
|
||||||
noRunningItemsSelected: '=',
|
|
||||||
noPausedItemsSelected: '=',
|
|
||||||
showAddAction: '<',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -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();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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: '<',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
@ -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 },
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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',
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
@ -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 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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,
|
||||||
|
};
|
||||||
|
|
@ -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,
|
||||||
|
};
|
||||||
|
|
@ -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];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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,
|
||||||
|
],
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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,
|
||||||
|
};
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
@ -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}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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,
|
||||||
|
};
|
||||||
|
|
@ -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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
||||||
|
};
|
||||||
|
|
@ -24,26 +24,6 @@ angular.module('portainer.docker').factory('Container', [
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params: { action: 'json' },
|
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: {
|
logs: {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params: { id: '@id', action: 'logs' },
|
params: { id: '@id', action: 'logs' },
|
||||||
|
|
@ -60,27 +40,12 @@ angular.module('portainer.docker').factory('Container', [
|
||||||
params: { id: '@id', action: 'top' },
|
params: { id: '@id', action: 'top' },
|
||||||
ignoreLoadingBar: true,
|
ignoreLoadingBar: true,
|
||||||
},
|
},
|
||||||
start: {
|
|
||||||
method: 'POST',
|
|
||||||
params: { id: '@id', action: 'start' },
|
|
||||||
transformResponse: genericHandler,
|
|
||||||
},
|
|
||||||
create: {
|
create: {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
params: { action: 'create' },
|
params: { action: 'create' },
|
||||||
transformResponse: genericHandler,
|
transformResponse: genericHandler,
|
||||||
ignoreLoadingBar: true,
|
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: {
|
exec: {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
params: { id: '@id', action: 'exec' },
|
params: { id: '@id', action: 'exec' },
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,32 @@
|
||||||
|
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';
|
import { ContainerDetailsViewModel, ContainerStatsViewModel, ContainerViewModel } from '../models/container';
|
||||||
|
|
||||||
angular.module('portainer.docker').factory('ContainerService', [
|
angular.module('portainer.docker').factory('ContainerService', ContainerServiceFactory);
|
||||||
'$q',
|
|
||||||
'Container',
|
/* @ngInject */
|
||||||
'ResourceControlService',
|
function ContainerServiceFactory($q, Container, LogHelper, $timeout, EndpointProvider) {
|
||||||
'LogHelper',
|
const service = {
|
||||||
'$timeout',
|
killContainer: withEndpointId(killContainer),
|
||||||
function ContainerServiceFactory($q, Container, ResourceControlService, LogHelper, $timeout) {
|
pauseContainer: withEndpointId(pauseContainer),
|
||||||
'use strict';
|
renameContainer: withEndpointId(renameContainer),
|
||||||
var service = {};
|
restartContainer: withEndpointId(restartContainer),
|
||||||
|
resumeContainer: withEndpointId(resumeContainer),
|
||||||
|
startContainer: withEndpointId(startContainer),
|
||||||
|
stopContainer: withEndpointId(stopContainer),
|
||||||
|
remove: withEndpointId(removeContainer),
|
||||||
|
updateRestartPolicy,
|
||||||
|
updateLimits,
|
||||||
|
};
|
||||||
|
|
||||||
service.container = function (id) {
|
service.container = function (id) {
|
||||||
var deferred = $q.defer();
|
var deferred = $q.defer();
|
||||||
|
|
@ -61,37 +79,6 @@ angular.module('portainer.docker').factory('ContainerService', [
|
||||||
return deferred.promise;
|
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) {
|
function updateRestartPolicy(id, restartPolicy, maximumRetryCounts) {
|
||||||
return Container.update({ id: id }, { RestartPolicy: { Name: restartPolicy, MaximumRetryCount: maximumRetryCounts } }).$promise;
|
return Container.update({ id: id }, { RestartPolicy: { Name: restartPolicy, MaximumRetryCount: maximumRetryCounts } }).$promise;
|
||||||
}
|
}
|
||||||
|
|
@ -140,24 +127,6 @@ angular.module('portainer.docker').factory('ContainerService', [
|
||||||
return deferred.promise;
|
return deferred.promise;
|
||||||
};
|
};
|
||||||
|
|
||||||
service.remove = function (container, removeVolumes) {
|
|
||||||
var deferred = $q.defer();
|
|
||||||
|
|
||||||
Container.remove({ id: container.Id, v: removeVolumes ? 1 : 0, force: true })
|
|
||||||
.$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) {
|
service.createExec = function (execConfig) {
|
||||||
var deferred = $q.defer();
|
var deferred = $q.defer();
|
||||||
|
|
||||||
|
|
@ -228,5 +197,10 @@ angular.module('portainer.docker').factory('ContainerService', [
|
||||||
};
|
};
|
||||||
|
|
||||||
return service;
|
return service;
|
||||||
},
|
|
||||||
]);
|
function withEndpointId(func) {
|
||||||
|
const endpointId = EndpointProvider.endpointID();
|
||||||
|
|
||||||
|
return func.bind(null, endpointId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,19 +7,15 @@
|
||||||
<rd-header-content>Containers</rd-header-content>
|
<rd-header-content>Containers</rd-header-content>
|
||||||
</rd-header>
|
</rd-header>
|
||||||
<information-panel-offline ng-if="offlineMode"></information-panel-offline>
|
<information-panel-offline ng-if="offlineMode"></information-panel-offline>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-12" ng-if="containers">
|
<div class="col-sm-12" ng-if="containers">
|
||||||
<containers-datatable
|
<containers-datatable
|
||||||
title-text="Containers"
|
endpoint="endpoint"
|
||||||
title-icon="fa-cubes"
|
|
||||||
dataset="containers"
|
dataset="containers"
|
||||||
table-key="containers"
|
is-host-column-visible="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
|
||||||
order-by="Status"
|
is-add-action-visible="true"
|
||||||
show-host-column="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
|
on-refresh="(getContainers)"
|
||||||
show-add-action="true"
|
|
||||||
offline-mode="offlineMode"
|
|
||||||
refresh-callback="getContainers"
|
|
||||||
endpoint-public-url="endpoint.PublicURL"
|
|
||||||
></containers-datatable>
|
></containers-datatable>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import _ from 'lodash-es';
|
import _ from 'lodash-es';
|
||||||
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
|
import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
|
||||||
|
import { confirmContainerDeletion } from '@/portainer/services/modal.service/prompt';
|
||||||
|
|
||||||
angular.module('portainer.docker').controller('ContainerController', [
|
angular.module('portainer.docker').controller('ContainerController', [
|
||||||
'$q',
|
'$q',
|
||||||
|
|
@ -246,7 +247,8 @@ angular.module('portainer.docker').controller('ContainerController', [
|
||||||
if ($scope.container.State.Running) {
|
if ($scope.container.State.Running) {
|
||||||
title = 'You are about to remove a running container.';
|
title = 'You are about to remove a running container.';
|
||||||
}
|
}
|
||||||
ModalService.confirmContainerDeletion(title, function (result) {
|
|
||||||
|
confirmContainerDeletion(title, function (result) {
|
||||||
if (!result) {
|
if (!result) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,6 @@ function sizeClass(size: Size | undefined) {
|
||||||
case 'large':
|
case 'large':
|
||||||
return 'btn-group-lg';
|
return 'btn-group-lg';
|
||||||
default:
|
default:
|
||||||
return 'btn-group-sm';
|
return '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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 };
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>;
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
.sort-icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
.alert-visible {
|
||||||
|
opacity: 1;
|
||||||
|
transition: all 250ms linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert-hidden {
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 250ms ease-out 2s;
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>;
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -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';
|
||||||
|
|
@ -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]);
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
>;
|
||||||
|
}
|
||||||
|
|
@ -126,6 +126,10 @@
|
||||||
color: #767676;
|
color: #767676;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 12px !important;
|
font-size: 12px !important;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.widget .widget-body table thead th .filter-active {
|
.widget .widget-body table thead th .filter-active {
|
||||||
|
|
@ -252,3 +256,25 @@
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
width: 8px;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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}
|
||||||
|
>
|
||||||
|
«
|
||||||
|
</PageButton>
|
||||||
|
) : null}
|
||||||
|
{directionLinks ? (
|
||||||
|
<PageButton
|
||||||
|
onPageChange={onPageChange}
|
||||||
|
page={currentPage - 1}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
>
|
||||||
|
‹
|
||||||
|
</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}
|
||||||
|
>
|
||||||
|
›
|
||||||
|
</PageButton>
|
||||||
|
) : null}
|
||||||
|
{boundaryLinks ? (
|
||||||
|
<PageButton
|
||||||
|
disabled={currentPage === last}
|
||||||
|
onPageChange={onPageChange}
|
||||||
|
page={last}
|
||||||
|
>
|
||||||
|
»
|
||||||
|
</PageButton>
|
||||||
|
) : null}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import './pagination-controls.css';
|
||||||
|
|
||||||
|
export { PaginationControls } from './PaginationControls';
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
export type EnvironmentId = number;
|
||||||
|
|
||||||
|
export enum EnvironmentStatus {
|
||||||
|
Up = 1,
|
||||||
|
Down = 2,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Environment {
|
||||||
|
Id: EnvironmentId;
|
||||||
|
Status: EnvironmentStatus;
|
||||||
|
PublicURL: string;
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
export default class PortainerError {
|
|
||||||
constructor(msg, err) {
|
|
||||||
this.msg = msg;
|
|
||||||
this.err = err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
export default class PortainerError extends Error {
|
||||||
|
err?: Error;
|
||||||
|
|
||||||
|
constructor(msg: string, err?: Error) {
|
||||||
|
super(msg);
|
||||||
|
this.err = err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -71,13 +71,10 @@ interface AuthorizedProps {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Authorized({
|
export function Authorized({ authorizations, children }: AuthorizedProps) {
|
||||||
authorizations,
|
|
||||||
children,
|
|
||||||
}: AuthorizedProps): ReactNode {
|
|
||||||
const isAllowed = useAuthorizations(authorizations);
|
const isAllowed = useAuthorizations(authorizations);
|
||||||
|
|
||||||
return isAllowed ? children : null;
|
return isAllowed ? <>{children}</> : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface UserProviderProps {
|
interface UserProviderProps {
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -66,7 +66,9 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@aws-crypto/sha256-js": "^2.0.0",
|
"@aws-crypto/sha256-js": "^2.0.0",
|
||||||
"@fortawesome/fontawesome-free": "^5.15.4",
|
"@fortawesome/fontawesome-free": "^5.15.4",
|
||||||
|
"@lineup-lite/hooks": "^1.6.0",
|
||||||
"@nxmix/tokenize-ansi": "^3.0.0",
|
"@nxmix/tokenize-ansi": "^3.0.0",
|
||||||
|
"@reach/menu-button": "^0.16.1",
|
||||||
"@uirouter/angularjs": "1.0.11",
|
"@uirouter/angularjs": "1.0.11",
|
||||||
"@uirouter/react": "^1.0.7",
|
"@uirouter/react": "^1.0.7",
|
||||||
"@uirouter/react-hybrid": "^1.0.4",
|
"@uirouter/react-hybrid": "^1.0.4",
|
||||||
|
|
@ -113,7 +115,9 @@
|
||||||
"rc-slider": "^9.7.5",
|
"rc-slider": "^9.7.5",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
|
"react-is": "^17.0.2",
|
||||||
"react-select": "^5.2.1",
|
"react-select": "^5.2.1",
|
||||||
|
"react-table": "^7.7.0",
|
||||||
"react-tooltip": "^4.2.21",
|
"react-tooltip": "^4.2.21",
|
||||||
"sanitize-html": "^2.5.3",
|
"sanitize-html": "^2.5.3",
|
||||||
"spinkit": "^2.0.1",
|
"spinkit": "^2.0.1",
|
||||||
|
|
@ -151,6 +155,7 @@
|
||||||
"@types/lodash-es": "^4.17.5",
|
"@types/lodash-es": "^4.17.5",
|
||||||
"@types/react": "^17.0.37",
|
"@types/react": "^17.0.37",
|
||||||
"@types/react-dom": "^17.0.11",
|
"@types/react-dom": "^17.0.11",
|
||||||
|
"@types/react-table": "^7.7.6",
|
||||||
"@types/sanitize-html": "^2.5.0",
|
"@types/sanitize-html": "^2.5.0",
|
||||||
"@types/toastr": "^2.1.39",
|
"@types/toastr": "^2.1.39",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.7.0",
|
"@typescript-eslint/eslint-plugin": "^5.7.0",
|
||||||
|
|
|
||||||
141
yarn.lock
141
yarn.lock
|
|
@ -1705,6 +1705,21 @@
|
||||||
resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
|
resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
|
||||||
integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==
|
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":
|
"@mdx-js/loader@^1.6.22":
|
||||||
version "1.6.22"
|
version "1.6.22"
|
||||||
resolved "https://registry.npmjs.org/@mdx-js/loader/-/loader-1.6.22.tgz"
|
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"
|
resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz"
|
||||||
integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
|
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":
|
"@simbathesailor/use-what-changed@^2.0.0":
|
||||||
version "2.0.0"
|
version "2.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/@simbathesailor/use-what-changed/-/use-what-changed-2.0.0.tgz#7f82d78f92c8588b5fadd702065dde93bd781403"
|
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" "*"
|
||||||
|
|
||||||
"@types/lodash@*":
|
"@types/lodash@*":
|
||||||
version "4.14.176"
|
version "4.14.175"
|
||||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.176.tgz#641150fc1cda36fbfa329de603bbb175d7ee20c0"
|
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.175.tgz#b78dfa959192b01fae0ad90e166478769b215f45"
|
||||||
integrity sha512-xZmuPTa3rlZoIbtDUyJKZQimJV3bxCmzMIO2c9Pz9afyDro6kr7R79GwcB6mRhuoPmV2p1Vb66WOJH7F886WKQ==
|
integrity sha512-XmdEOrKQ8a1Y/yxQFOMbC47G/V2VDO1GvMRnl4O75M4GW/abC5tnfzadQYkqEveqRM1dEJGFFegfPNA2vvx2iw==
|
||||||
|
|
||||||
"@types/lodash@^4.14.175":
|
"@types/lodash@^4.14.175":
|
||||||
version "4.14.177"
|
version "4.14.177"
|
||||||
|
|
@ -3211,6 +3313,13 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
"@types/react" "*"
|
"@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":
|
"@types/react-transition-group@^4.4.0":
|
||||||
version "4.4.4"
|
version "4.4.4"
|
||||||
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
|
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-mimetype "^2.3.0"
|
||||||
whatwg-url "^8.0.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:
|
dateformat@~1.0.12:
|
||||||
version "1.0.12"
|
version "1.0.12"
|
||||||
resolved "https://registry.npmjs.org/dateformat/-/dateformat-1.0.12.tgz"
|
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"
|
resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz"
|
||||||
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
|
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"
|
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==
|
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:
|
move-concurrently@^1.0.1:
|
||||||
version "1.0.1"
|
version "1.0.1"
|
||||||
resolved "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz"
|
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"
|
prismjs "^1.21.0"
|
||||||
refractor "^3.1.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:
|
react-test-renderer@^17.0.2:
|
||||||
version "17.0.2"
|
version "17.0.2"
|
||||||
resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.2.tgz"
|
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"
|
resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.15.tgz#07ca1822b9de0001f5ff73595f3d08c4f720eb8e"
|
||||||
integrity sha512-k8uzYIkIVwmT+TcglpdN50pS2y1BDcUnBPK9iJeGu0Pl1lOI8pD6wtzgw91Pjpe+RxtTncw32tLxs/R0yNL2Mg==
|
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:
|
table@^3.7.8:
|
||||||
version "3.8.3"
|
version "3.8.3"
|
||||||
resolved "https://registry.npmjs.org/table/-/table-3.8.3.tgz"
|
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"
|
resolved "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz"
|
||||||
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
|
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
|
||||||
|
|
||||||
tiny-warning@^1.0.2:
|
tiny-warning@^1.0.2, tiny-warning@^1.0.3:
|
||||||
version "1.0.3"
|
version "1.0.3"
|
||||||
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
|
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
|
||||||
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
|
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue