mirror of https://github.com/portainer/portainer
refactor(docker/images): convert table to react [EE-4668] (#8910)
Chaim Lev-Ari
GitHub
parent
0e9902fee9
commit
ecd54ab929
|
|
@ -1,3 +0,0 @@
|
|||
.show-dropdown {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
|
@ -1,260 +0,0 @@
|
|||
<div class="datatable">
|
||||
<rd-widget>
|
||||
<rd-widget-body classes="no-padding">
|
||||
<div class="toolBar show-dropdown">
|
||||
<div class="toolBarTitle vertical-center">
|
||||
<div class="widget-icon space-right">
|
||||
<pr-icon icon="$ctrl.titleIcon"></pr-icon>
|
||||
</div>
|
||||
{{ $ctrl.titleText }}
|
||||
</div>
|
||||
<div class="searchBar vertical-center">
|
||||
<pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
|
||||
<input
|
||||
type="text"
|
||||
class="searchInput"
|
||||
ng-model="$ctrl.state.textFilter"
|
||||
ng-change="$ctrl.onTextFilterChange()"
|
||||
placeholder="Search for an image..."
|
||||
auto-focus
|
||||
ng-model-options="{ debounce: 300 }"
|
||||
data-cy="image-searchInput"
|
||||
/>
|
||||
</div>
|
||||
<div class="actionBar !gap-3" authorization="DockerImageDelete, DockerImageBuild, DockerImageLoad, DockerImageGet">
|
||||
<div class="btn-group" authorization="DockerImageDelete">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-dangerlight vertical-center !ml-0 h-fit"
|
||||
authorization="DockerImageDelete"
|
||||
ng-disabled="$ctrl.state.selectedItemCount === 0"
|
||||
ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
|
||||
data-cy="image-removeImageButton"
|
||||
>
|
||||
<pr-icon icon="'trash-2'"></pr-icon>Remove
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-dangerlight dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
ng-disabled="$ctrl.state.selectedItemCount === 0"
|
||||
>
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a ng-click="$ctrl.forceRemoveAction($ctrl.state.selectedItems, true)" ng-disabled="$ctrl.state.selectedItemCount === 0">Force Remove</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-light h-fit"
|
||||
ui-sref="docker.images.import"
|
||||
authorization="DockerImageLoad"
|
||||
ng-disabled="$ctrl.exportInProgress"
|
||||
data-cy="image-importImageButton"
|
||||
>
|
||||
<pr-icon icon="'upload'"></pr-icon>Import
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-light h-fit"
|
||||
ng-disabled="$ctrl.state.selectedItemCount === 0 || $ctrl.exportInProgress"
|
||||
ng-click="$ctrl.downloadAction($ctrl.state.selectedItems)"
|
||||
button-spinner="$ctrl.exportInProgress"
|
||||
authorization="DockerImageGet"
|
||||
data-cy="image-exportImageButton"
|
||||
>
|
||||
<pr-icon icon="'download'"></pr-icon>
|
||||
<span ng-hide="$ctrl.exportInProgress">Export</span>
|
||||
<span ng-show="$ctrl.exportInProgress">Export in progress...</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary vertical-center !ml-0 h-fit"
|
||||
ui-sref="docker.images.build"
|
||||
authorization="DockerImageBuild"
|
||||
data-cy="image-buildImageButton"
|
||||
>
|
||||
<pr-icon icon="'plus'"></pr-icon>Build a new image
|
||||
</button>
|
||||
</div>
|
||||
<div class="settings">
|
||||
<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 aria-label="Settings">
|
||||
<pr-icon icon="'more-vertical'"></pr-icon>
|
||||
</span>
|
||||
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
|
||||
<div class="tableMenu">
|
||||
<div class="menuHeader"> Table settings </div>
|
||||
<div class="menuContent">
|
||||
<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>
|
||||
<pr-icon id="refreshRateChange" icon="'check'" mode="'success'" style="display: none"></pr-icon>
|
||||
</span>
|
||||
</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>
|
||||
<div class="table-responsive">
|
||||
<table class="table-hover table-filters nowrap-cells table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th uib-dropdown dropdown-append-to-body auto-close="disabled" popover-placement="bottom-left" is-open="$ctrl.filters.state.open">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="md-checkbox">
|
||||
<input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
|
||||
<label for="select_all"></label>
|
||||
</span>
|
||||
<table-column-header
|
||||
col-title="'Id'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Id'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Id')"
|
||||
></table-column-header>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled"
|
||||
>Filter
|
||||
<pr-icon icon="'filter'"></pr-icon>
|
||||
</span>
|
||||
<span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled"
|
||||
>Filter
|
||||
<pr-icon icon="'check'"></pr-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="dropdown-menu" uib-dropdown-menu>
|
||||
<div class="tableMenu">
|
||||
<div class="menuHeader"> Filter by usage </div>
|
||||
<div class="menuContent">
|
||||
<div class="md-checkbox">
|
||||
<input id="filter_usage_usedImages" type="checkbox" ng-model="$ctrl.filters.state.showUsedImages" ng-change="$ctrl.onstateFilterChange()" />
|
||||
<label for="filter_usage_usedImages">Used images</label>
|
||||
</div>
|
||||
<div class="md-checkbox">
|
||||
<input id="filter_usage_unusedImages" type="checkbox" ng-model="$ctrl.filters.state.showUnusedImages" ng-change="$ctrl.onstateFilterChange()" />
|
||||
<label for="filter_usage_unusedImages">Unused images</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>
|
||||
<table-column-header
|
||||
col-title="'Tags'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'RepoTags'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'RepoTags' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('RepoTags')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<table-column-header
|
||||
col-title="'Size'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'VirtualSize'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'VirtualSize' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('VirtualSize')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th>
|
||||
<table-column-header
|
||||
col-title="'Created'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'Created'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('Created')"
|
||||
></table-column-header>
|
||||
</th>
|
||||
<th ng-if="$ctrl.showHostColumn">
|
||||
<table-column-header
|
||||
col-title="'Host'"
|
||||
can-sort="true"
|
||||
is-sorted="$ctrl.state.orderBy === 'NodeName'"
|
||||
is-sorted-desc="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"
|
||||
ng-click="$ctrl.changeOrderBy('NodeName')"
|
||||
></table-column-header>
|
||||
</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">
|
||||
<input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" />
|
||||
<label for="select_{{ $index }}"></label>
|
||||
</span>
|
||||
<a ui-sref="docker.images.image({ id: item.Id, nodeName: item.NodeName })" class="monospaced" title="{{ item.Id }}">{{ item.Id | truncate : 40 }}</a>
|
||||
<span style="margin-left: 10px" class="label label-warning image-tag" ng-if="::item.ContainerCount === 0">Unused</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="label label-primary image-tag" ng-repeat="tag in (item | repotags) track by $index">{{ tag }}</span>
|
||||
</td>
|
||||
<td>{{ item.VirtualSize | humansize }}</td>
|
||||
<td>{{ item.Created | getisodatefromtimestamp }}</td>
|
||||
<td ng-if="$ctrl.showHostColumn">{{ item.NodeName ? item.NodeName : '-' }}</td>
|
||||
</tr>
|
||||
<tr ng-if="!$ctrl.dataset">
|
||||
<td colspan="5" class="text-muted text-center">Loading...</td>
|
||||
</tr>
|
||||
<tr ng-if="$ctrl.state.filteredDataSet.length === 0">
|
||||
<td colspan="5" class="text-muted text-center">No image 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 vertical-center">
|
||||
<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('imagesDatatable', {
|
||||
templateUrl: './imagesDatatable.html',
|
||||
controller: 'ImagesDatatableController',
|
||||
bindings: {
|
||||
titleText: '@',
|
||||
titleIcon: '@',
|
||||
dataset: '<',
|
||||
tableKey: '@',
|
||||
orderBy: '@',
|
||||
reverseOrder: '<',
|
||||
showHostColumn: '<',
|
||||
removeAction: '<',
|
||||
downloadAction: '<',
|
||||
forceRemoveAction: '<',
|
||||
exportInProgress: '<',
|
||||
refreshCallback: '<',
|
||||
},
|
||||
});
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
import './imagesDatatable.css';
|
||||
angular.module('portainer.docker').controller('ImagesDatatableController', [
|
||||
'$scope',
|
||||
'$controller',
|
||||
'DatatableService',
|
||||
function ($scope, $controller, DatatableService) {
|
||||
angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
|
||||
|
||||
var ctrl = this;
|
||||
|
||||
this.filters = {
|
||||
state: {
|
||||
open: false,
|
||||
enabled: false,
|
||||
showUsedImages: true,
|
||||
showUnusedImages: true,
|
||||
},
|
||||
};
|
||||
|
||||
this.applyFilters = function (value) {
|
||||
var image = value;
|
||||
var filters = ctrl.filters;
|
||||
if ((image.ContainerCount === 0 && filters.state.showUnusedImages) || (image.ContainerCount !== 0 && filters.state.showUsedImages)) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
this.onstateFilterChange = function () {
|
||||
var filters = this.filters.state;
|
||||
var filtered = false;
|
||||
if (!filters.showUsedImages || !filters.showUnusedImages) {
|
||||
filtered = true;
|
||||
}
|
||||
this.filters.state.enabled = filtered;
|
||||
DatatableService.setDataTableFilters(this.tableKey, this.filters);
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
if (this.filters && this.filters.state) {
|
||||
this.filters.state.open = false;
|
||||
}
|
||||
|
||||
var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
|
||||
if (storedSettings !== null) {
|
||||
this.settings = storedSettings;
|
||||
this.settings.open = false;
|
||||
}
|
||||
|
||||
this.onSettingsRepeaterChange();
|
||||
};
|
||||
},
|
||||
]);
|
||||
|
|
@ -15,7 +15,7 @@ export function ImageViewModel(data) {
|
|||
}
|
||||
|
||||
this.VirtualSize = data.VirtualSize;
|
||||
this.ContainerCount = data.ContainerCount;
|
||||
this.Used = data.Used;
|
||||
|
||||
if (data.Portainer && data.Portainer.Agent && data.Portainer.Agent.NodeName) {
|
||||
this.NodeName = data.Portainer.Agent.NodeName;
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { GpusList } from '@/react/docker/host/SetupView/GpusList';
|
|||
import { GpusInsights } from '@/react/docker/host/SetupView/GpusInsights';
|
||||
import { InsightsBox } from '@/react/components/InsightsBox';
|
||||
import { BetaAlert } from '@/react/portainer/environments/update-schedules/common/BetaAlert';
|
||||
import { ImagesDatatable } from '@/react/docker/images/ListView/ImagesDatatable/ImagesDatatable';
|
||||
|
||||
export const componentsModule = angular
|
||||
.module('portainer.docker.react.components', [])
|
||||
|
|
@ -66,4 +67,17 @@ export const componentsModule = angular
|
|||
])
|
||||
)
|
||||
.component('betaAlert', r2a(BetaAlert, ['className', 'message', 'isHtml']))
|
||||
.component('gpusInsights', r2a(GpusInsights, [])).name;
|
||||
.component('gpusInsights', r2a(GpusInsights, []))
|
||||
.component(
|
||||
'dockerImagesDatatable',
|
||||
r2a(withUIRouter(withCurrentUser(ImagesDatatable)), [
|
||||
'dataset',
|
||||
'environment',
|
||||
'onRemove',
|
||||
'isExportInProgress',
|
||||
'isHostColumnVisible',
|
||||
'onDownload',
|
||||
'onRefresh',
|
||||
'onRemove',
|
||||
])
|
||||
).name;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import _ from 'lodash';
|
||||
import { getUniqueTagListFromImages } from '@/react/docker/images/utils';
|
||||
import { ImageViewModel } from '../models/image';
|
||||
import { ImageDetailsViewModel } from '../models/imageDetails';
|
||||
|
|
@ -41,15 +42,10 @@ angular.module('portainer.docker').factory('ImageService', [
|
|||
})
|
||||
.then(function success(data) {
|
||||
var containers = data.containers;
|
||||
const containerByImageId = _.groupBy(containers, 'ImageID');
|
||||
|
||||
var images = data.images.map(function (item) {
|
||||
item.ContainerCount = 0;
|
||||
for (var i = 0; i < containers.length; i++) {
|
||||
var container = containers[i];
|
||||
if (container.ImageID === item.Id) {
|
||||
item.ContainerCount++;
|
||||
}
|
||||
}
|
||||
item.Used = !!containerByImageId[item.Id] && containerByImageId[item.Id].length > 0;
|
||||
return new ImageViewModel(item);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -44,20 +44,17 @@
|
|||
</rd-widget>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<images-datatable
|
||||
title-text="Images"
|
||||
title-icon="list"
|
||||
dataset="images"
|
||||
table-key="images"
|
||||
order-by="RepoTags"
|
||||
show-host-column="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
|
||||
download-action="downloadAction"
|
||||
remove-action="confirmRemove"
|
||||
force-remove-action="confirmForceRemove"
|
||||
export-in-progress="state.exportInProgress"
|
||||
refresh-callback="getImages"
|
||||
></images-datatable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<docker-images-datatable
|
||||
ng-if="images"
|
||||
dataset="images"
|
||||
is-host-column-visible="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
|
||||
on-download="(downloadAction)"
|
||||
on-remove="(confirmRemovalAction)"
|
||||
on-refresh="(getImages)"
|
||||
is-export-in-progress="state.exportInProgress"
|
||||
storage-key="images"
|
||||
environment="endpoint"
|
||||
settings-store="settingsStore"
|
||||
containers="containers"
|
||||
></docker-images-datatable>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ angular.module('portainer.docker').controller('ImagesController', [
|
|||
'Blob',
|
||||
'endpoint',
|
||||
'$async',
|
||||
function ($scope, $state, Authentication, ImageService, Notifications, HttpRequestHelper, FileSaver, Blob, endpoint, $async) {
|
||||
function ($scope, $state, Authentication, ImageService, Notifications, HttpRequestHelper, FileSaver, Blob, endpoint) {
|
||||
$scope.endpoint = endpoint;
|
||||
$scope.isAdmin = Authentication.isAdmin();
|
||||
|
||||
|
|
@ -54,40 +54,32 @@ angular.module('portainer.docker').controller('ImagesController', [
|
|||
});
|
||||
};
|
||||
|
||||
$scope.confirmForceRemove = confirmForceRemove;
|
||||
function confirmForceRemove(selectedItems, force) {
|
||||
return $async(async () => {
|
||||
const confirmed = await confirmDestructive({
|
||||
title: 'Are you sure?',
|
||||
message: 'Forcing the removal of the image will remove the image even if it has multiple tags or if it is used by stopped containers.',
|
||||
confirmButton: buildConfirmButton('Remove the image', 'danger'),
|
||||
});
|
||||
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.removeAction(selectedItems, force);
|
||||
function confirmImageForceRemoval() {
|
||||
return confirmDestructive({
|
||||
title: 'Are you sure?',
|
||||
message: 'Forcing the removal of the image will remove the image even if it has multiple tags or if it is used by stopped containers.',
|
||||
confirmButton: buildConfirmButton('Remove the image', 'danger'),
|
||||
});
|
||||
}
|
||||
|
||||
$scope.confirmRemove = confirmRemove;
|
||||
function confirmRemove(selectedItems) {
|
||||
return $async(async () => {
|
||||
const confirmed = await confirmDestructive({
|
||||
title: 'Are you sure?',
|
||||
message: 'Removing the image will remove all tags associated to that image. Are you sure you want to remove the image?',
|
||||
confirmButton: buildConfirmButton('Remove the image', 'danger'),
|
||||
});
|
||||
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.removeAction(selectedItems, false);
|
||||
function confirmRegularRemove() {
|
||||
return confirmDestructive({
|
||||
title: 'Are you sure?',
|
||||
message: 'Removing the image will remove all tags associated to that image. Are you sure you want to remove the image?',
|
||||
confirmButton: buildConfirmButton('Remove the image', 'danger'),
|
||||
});
|
||||
}
|
||||
|
||||
$scope.confirmRemovalAction = async function (selectedItems, force) {
|
||||
const confirmed = await (force ? confirmImageForceRemoval() : confirmRegularRemove());
|
||||
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.removeAction(selectedItems, force);
|
||||
};
|
||||
|
||||
function isAuthorizedToDownload(selectedItems) {
|
||||
for (var i = 0; i < selectedItems.length; i++) {
|
||||
var image = selectedItems[i];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
export function getValueAsArrayOfStrings(value: unknown): string[] {
|
||||
if (Array.isArray(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
if (!value || (typeof value !== 'string' && typeof value !== 'number')) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (typeof value === 'number') {
|
||||
return [value.toString()];
|
||||
}
|
||||
|
||||
return [value];
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import {
|
||||
AriaAttributes,
|
||||
ComponentType,
|
||||
forwardRef,
|
||||
MouseEventHandler,
|
||||
PropsWithChildren,
|
||||
ReactNode,
|
||||
|
|
@ -39,9 +40,17 @@ export interface Props<TasProps = unknown>
|
|||
type?: Type;
|
||||
as?: ComponentType<TasProps> | string;
|
||||
onClick?: MouseEventHandler<HTMLButtonElement>;
|
||||
mRef?: React.ForwardedRef<HTMLButtonElement>;
|
||||
props?: TasProps;
|
||||
}
|
||||
|
||||
export const ButtonWithRef = forwardRef<HTMLButtonElement, Omit<Props, 'mRef'>>(
|
||||
(props, ref) => (
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
<Button {...props} mRef={ref} />
|
||||
)
|
||||
);
|
||||
|
||||
export function Button<TasProps = unknown>({
|
||||
type = 'button',
|
||||
color = 'primary',
|
||||
|
|
@ -54,15 +63,19 @@ export function Button<TasProps = unknown>({
|
|||
children,
|
||||
as = 'button',
|
||||
props,
|
||||
mRef,
|
||||
...ariaProps
|
||||
}: PropsWithChildren<Props<TasProps>>) {
|
||||
const Component = as as 'button';
|
||||
return (
|
||||
<Component
|
||||
ref={mRef}
|
||||
/* eslint-disable-next-line react/button-has-type */
|
||||
type={type}
|
||||
disabled={disabled}
|
||||
className={clsx(`btn btn-${color}`, sizeClass(size), className)}
|
||||
className={clsx(`btn btn-${color}`, sizeClass(size), className, {
|
||||
disabled,
|
||||
})}
|
||||
onClick={(e) => {
|
||||
if (!disabled) {
|
||||
onClick?.(e);
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import { Menu, MenuButton, MenuPopover } from '@reach/menu-button';
|
|||
import { Column } from '@tanstack/react-table';
|
||||
import { Check, Filter } from 'lucide-react';
|
||||
|
||||
import { getValueAsArrayOfStrings } from '@/portainer/helpers/array';
|
||||
|
||||
import { Icon } from '@@/Icon';
|
||||
|
||||
interface MultipleSelectionFilterProps {
|
||||
|
|
@ -103,19 +105,3 @@ export function filterHOC<TData extends Record<string, unknown>>(
|
|||
);
|
||||
};
|
||||
}
|
||||
|
||||
function getValueAsArrayOfStrings(value: unknown): string[] {
|
||||
if (Array.isArray(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
if (!value || (typeof value !== 'string' && typeof value !== 'number')) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (typeof value === 'number') {
|
||||
return [value.toString()];
|
||||
}
|
||||
|
||||
return [value];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -93,8 +93,23 @@ export function createPersistedStore<T extends BasicTableSettings>(
|
|||
...create(set),
|
||||
} as T),
|
||||
{
|
||||
name: keyBuilder(storageKey),
|
||||
name: `datatable_settings_${keyBuilder(storageKey)}`,
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/** this class is just a dummy class to get return type of createPersistedStore
|
||||
* can be fixed after upgrade to ts 4.7+
|
||||
* https://stackoverflow.com/a/64919133
|
||||
*/
|
||||
class Wrapper<T extends BasicTableSettings> {
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
wrapped() {
|
||||
return createPersistedStore<T>('', '');
|
||||
}
|
||||
}
|
||||
|
||||
export type CreatePersistedStoreReturn<
|
||||
T extends BasicTableSettings = BasicTableSettings
|
||||
> = ReturnType<Wrapper<T>['wrapped']>;
|
||||
|
|
|
|||
|
|
@ -2,22 +2,11 @@ import { useMemo, useState } from 'react';
|
|||
import { useStore } from 'zustand';
|
||||
|
||||
import { useSearchBarState } from './SearchBar';
|
||||
import { BasicTableSettings, createPersistedStore } from './types';
|
||||
|
||||
/** this class is just a dummy class to get return type of createPersistedStore
|
||||
* can be fixed after upgrade to ts 4.7+
|
||||
* https://stackoverflow.com/a/64919133
|
||||
*/
|
||||
class Wrapper<T extends BasicTableSettings> {
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
wrapped() {
|
||||
return createPersistedStore<T>('', '');
|
||||
}
|
||||
}
|
||||
import { BasicTableSettings, CreatePersistedStoreReturn } from './types';
|
||||
|
||||
export function useTableState<
|
||||
TSettings extends BasicTableSettings = BasicTableSettings
|
||||
>(store: ReturnType<Wrapper<TSettings>['wrapped']>, storageKey: string) {
|
||||
>(store: CreatePersistedStoreReturn<TSettings>, storageKey: string) {
|
||||
const settings = useStore(store);
|
||||
|
||||
const [search, setSearch] = useSearchBarState(storageKey);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,213 @@
|
|||
import {
|
||||
ChevronDown,
|
||||
Download,
|
||||
List,
|
||||
Plus,
|
||||
Trash2,
|
||||
Upload,
|
||||
} from 'lucide-react';
|
||||
import { Menu, MenuButton, MenuItem, MenuPopover } from '@reach/menu-button';
|
||||
import { positionRight } from '@reach/popover';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { Environment } from '@/react/portainer/environments/types';
|
||||
import { Authorized } from '@/react/hooks/useUser';
|
||||
|
||||
import { Datatable, TableSettingsMenu } from '@@/datatables';
|
||||
import {
|
||||
BasicTableSettings,
|
||||
createPersistedStore,
|
||||
refreshableSettings,
|
||||
RefreshableTableSettings,
|
||||
} from '@@/datatables/types';
|
||||
import { useTableState } from '@@/datatables/useTableState';
|
||||
import { Button, ButtonGroup, LoadingButton } from '@@/buttons';
|
||||
import { Link } from '@@/Link';
|
||||
import { ButtonWithRef } from '@@/buttons/Button';
|
||||
import { useRepeater } from '@@/datatables/useRepeater';
|
||||
import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
|
||||
|
||||
import { DockerImage } from '../../types';
|
||||
|
||||
import { columns as defColumns } from './columns';
|
||||
import { host as hostColumn } from './columns/host';
|
||||
import { RowProvider } from './RowContext';
|
||||
|
||||
const tableKey = 'images';
|
||||
|
||||
export interface TableSettings
|
||||
extends BasicTableSettings,
|
||||
RefreshableTableSettings {}
|
||||
|
||||
const settingsStore = createPersistedStore<TableSettings>(
|
||||
tableKey,
|
||||
'tags',
|
||||
(set) => ({
|
||||
...refreshableSettings(set),
|
||||
})
|
||||
);
|
||||
|
||||
export function ImagesDatatable({
|
||||
dataset,
|
||||
|
||||
environment,
|
||||
isHostColumnVisible,
|
||||
isExportInProgress,
|
||||
onDownload,
|
||||
onRefresh,
|
||||
onRemove,
|
||||
}: {
|
||||
dataset: Array<DockerImage>;
|
||||
environment: Environment;
|
||||
isHostColumnVisible: boolean;
|
||||
|
||||
onDownload: (images: Array<DockerImage>) => void;
|
||||
onRemove: (images: Array<DockerImage>, force: true) => void;
|
||||
onRefresh: () => Promise<void>;
|
||||
isExportInProgress: boolean;
|
||||
}) {
|
||||
const tableState = useTableState(settingsStore, tableKey);
|
||||
const columns = useMemo(
|
||||
() => (isHostColumnVisible ? [...defColumns, hostColumn] : defColumns),
|
||||
[isHostColumnVisible]
|
||||
);
|
||||
|
||||
useRepeater(tableState.autoRefreshRate, onRefresh);
|
||||
|
||||
return (
|
||||
<RowProvider context={{ environment }}>
|
||||
<Datatable
|
||||
title="Images"
|
||||
titleIcon={List}
|
||||
renderTableActions={(selectedItems) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<RemoveButtonMenu
|
||||
selectedItems={selectedItems}
|
||||
onRemove={onRemove}
|
||||
/>
|
||||
|
||||
<ImportExportButtons
|
||||
isExportInProgress={isExportInProgress}
|
||||
onExportClick={onDownload}
|
||||
selectedItems={selectedItems}
|
||||
/>
|
||||
|
||||
<Authorized authorizations="DockerImageBuild">
|
||||
<Button
|
||||
as={Link}
|
||||
props={{ to: 'docker.images.build' }}
|
||||
data-cy="image-buildImageButton"
|
||||
icon={Plus}
|
||||
>
|
||||
Build a new image
|
||||
</Button>
|
||||
</Authorized>
|
||||
</div>
|
||||
)}
|
||||
dataset={dataset}
|
||||
settingsManager={tableState}
|
||||
columns={columns}
|
||||
emptyContentLabel="No images found"
|
||||
renderTableSettings={() => (
|
||||
<TableSettingsMenu>
|
||||
<TableSettingsMenuAutoRefresh
|
||||
value={tableState.autoRefreshRate}
|
||||
onChange={(value) => tableState.setAutoRefreshRate(value)}
|
||||
/>
|
||||
</TableSettingsMenu>
|
||||
)}
|
||||
/>
|
||||
</RowProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function RemoveButtonMenu({
|
||||
onRemove,
|
||||
selectedItems,
|
||||
}: {
|
||||
selectedItems: Array<DockerImage>;
|
||||
onRemove(selectedItems: Array<DockerImage>, force: boolean): void;
|
||||
}) {
|
||||
return (
|
||||
<Authorized authorizations="DockerImageDelete">
|
||||
<ButtonGroup>
|
||||
<Button
|
||||
size="small"
|
||||
color="dangerlight"
|
||||
icon={Trash2}
|
||||
disabled={selectedItems.length === 0}
|
||||
data-cy="image-removeImageButton"
|
||||
onClick={() => {
|
||||
onRemove(selectedItems, false);
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
as={ButtonWithRef}
|
||||
size="small"
|
||||
color="dangerlight"
|
||||
disabled={selectedItems.length === 0}
|
||||
icon={ChevronDown}
|
||||
>
|
||||
<span className="sr-only">Toggle Dropdown</span>
|
||||
</MenuButton>
|
||||
<MenuPopover position={positionRight}>
|
||||
<div className="mt-3 bg-white">
|
||||
<MenuItem
|
||||
onSelect={() => {
|
||||
onRemove(selectedItems, true);
|
||||
}}
|
||||
>
|
||||
Force Remove
|
||||
</MenuItem>
|
||||
</div>
|
||||
</MenuPopover>
|
||||
</Menu>
|
||||
</ButtonGroup>
|
||||
</Authorized>
|
||||
);
|
||||
}
|
||||
|
||||
function ImportExportButtons({
|
||||
isExportInProgress,
|
||||
selectedItems,
|
||||
onExportClick,
|
||||
}: {
|
||||
isExportInProgress: boolean;
|
||||
selectedItems: Array<DockerImage>;
|
||||
onExportClick(selectedItems: Array<DockerImage>): void;
|
||||
}) {
|
||||
return (
|
||||
<ButtonGroup>
|
||||
<Authorized authorizations="DockerImageLoad">
|
||||
<Button
|
||||
size="small"
|
||||
color="light"
|
||||
as={Link}
|
||||
data-cy="image-importImageButton"
|
||||
icon={Upload}
|
||||
disabled={isExportInProgress}
|
||||
props={{ to: 'docker.images.import' }}
|
||||
>
|
||||
Import
|
||||
</Button>
|
||||
</Authorized>
|
||||
<Authorized authorizations="DockerImageGet">
|
||||
<LoadingButton
|
||||
size="small"
|
||||
color="light"
|
||||
icon={Download}
|
||||
isLoading={isExportInProgress}
|
||||
loadingText="Export in progress..."
|
||||
data-cy="image-exportImageButton"
|
||||
onClick={() => onExportClick(selectedItems)}
|
||||
disabled={selectedItems.length === 0}
|
||||
>
|
||||
Export
|
||||
</LoadingButton>
|
||||
</Authorized>
|
||||
</ButtonGroup>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { Environment } from '@/react/portainer/environments/types';
|
||||
|
||||
import { createRowContext } from '@@/datatables/RowContext';
|
||||
|
||||
interface RowContextState {
|
||||
environment: Environment;
|
||||
}
|
||||
|
||||
const { RowProvider, useRowContext } = createRowContext<RowContextState>();
|
||||
|
||||
export { RowProvider, useRowContext };
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { isoDateFromTimestamp } from '@/portainer/filters/filters';
|
||||
|
||||
import { columnHelper } from './helper';
|
||||
|
||||
export const created = columnHelper.accessor('Created', {
|
||||
id: 'created',
|
||||
header: 'Created',
|
||||
cell: ({ getValue }) => {
|
||||
const value = getValue();
|
||||
return isoDateFromTimestamp(value);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { createColumnHelper } from '@tanstack/react-table';
|
||||
|
||||
import { DockerImage } from '@/react/docker/images/types';
|
||||
|
||||
export const columnHelper = createColumnHelper<
|
||||
DockerImage & { NodeName?: string }
|
||||
>();
|
||||
|
||||
/**
|
||||
* Docker response from proxy (with added portainer metadata)
|
||||
* images view model
|
||||
* images snapshot
|
||||
* snapshots view model
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { columnHelper } from './helper';
|
||||
|
||||
export const host = columnHelper.accessor('NodeName', {
|
||||
header: 'Host',
|
||||
cell: ({ getValue }) => {
|
||||
const value = getValue();
|
||||
return value || '-';
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import { CellContext, Column } from '@tanstack/react-table';
|
||||
import { useSref } from '@uirouter/react';
|
||||
|
||||
import { DockerImage } from '@/react/docker/images/types';
|
||||
import { truncate } from '@/portainer/filters/filters';
|
||||
import { getValueAsArrayOfStrings } from '@/portainer/helpers/array';
|
||||
|
||||
import { MultipleSelectionFilter } from '@@/datatables/Filter';
|
||||
|
||||
import { columnHelper } from './helper';
|
||||
|
||||
export const id = columnHelper.accessor('Id', {
|
||||
id: 'id',
|
||||
header: 'Id',
|
||||
cell: Cell,
|
||||
enableColumnFilter: true,
|
||||
filterFn: (
|
||||
{ original: { Used } },
|
||||
columnId,
|
||||
filterValue: Array<'Used' | 'Unused'>
|
||||
) => {
|
||||
if (filterValue.length === 0) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (filterValue.includes('Used') && Used) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (filterValue.includes('Unused') && !Used) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
meta: {
|
||||
filter: FilterByUsage,
|
||||
},
|
||||
});
|
||||
|
||||
function FilterByUsage<TData extends { Used: boolean }>({
|
||||
column: { getFilterValue, setFilterValue, id },
|
||||
}: {
|
||||
column: Column<TData>;
|
||||
}) {
|
||||
const options = ['Used', 'Unused'];
|
||||
|
||||
const value = getFilterValue();
|
||||
|
||||
const valueAsArray = getValueAsArrayOfStrings(value);
|
||||
|
||||
return (
|
||||
<MultipleSelectionFilter
|
||||
options={options}
|
||||
filterKey={id}
|
||||
value={valueAsArray}
|
||||
onChange={setFilterValue}
|
||||
menuTitle="Filter by usage"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function Cell({
|
||||
getValue,
|
||||
row: { original: image },
|
||||
}: CellContext<DockerImage, string>) {
|
||||
const name = getValue();
|
||||
|
||||
const linkProps = useSref('.image', {
|
||||
id: image.Id,
|
||||
imageId: image.Id,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<a href={linkProps.href} onClick={linkProps.onClick} title={name}>
|
||||
{truncate(name, 40)}
|
||||
</a>
|
||||
{!image.Used && (
|
||||
<span className="label label-warning image-tag ml-2">Unused</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { created } from './created';
|
||||
import { id } from './id';
|
||||
import { size } from './size';
|
||||
import { tags } from './tags';
|
||||
|
||||
export const columns = [id, tags, size, created];
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { humanize } from '@/portainer/filters/filters';
|
||||
|
||||
import { columnHelper } from './helper';
|
||||
|
||||
export const size = columnHelper.accessor('VirtualSize', {
|
||||
id: 'size',
|
||||
header: 'Size',
|
||||
cell: ({ getValue }) => {
|
||||
const value = getValue();
|
||||
return humanize(value);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { CellContext } from '@tanstack/react-table';
|
||||
|
||||
import { DockerImage } from '@/react/docker/images/types';
|
||||
|
||||
import { columnHelper } from './helper';
|
||||
|
||||
export const tags = columnHelper.accessor('RepoTags', {
|
||||
id: 'tags',
|
||||
header: 'Tags',
|
||||
cell: Cell,
|
||||
});
|
||||
|
||||
function Cell({ getValue }: CellContext<DockerImage, string[]>) {
|
||||
const repoTags = getValue();
|
||||
|
||||
return (
|
||||
<>
|
||||
{repoTags.map((tag, idx) => (
|
||||
<span key={idx} className="label label-primary image-tag" title={tag}>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import { PortainerMetadata } from '../../types';
|
||||
|
||||
export type DockerImageResponse = {
|
||||
Containers: number;
|
||||
Created: number;
|
||||
|
|
@ -9,4 +11,5 @@ export type DockerImageResponse = {
|
|||
SharedSize: number;
|
||||
Size: number;
|
||||
VirtualSize: number;
|
||||
Portainer?: PortainerMetadata;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
"@reach/dialog": "^0.17.0",
|
||||
"@reach/menu-button": "^0.16.1",
|
||||
"@tanstack/react-table": "^8.8.5",
|
||||
"@reach/popover": "^0.18.0",
|
||||
"@tippyjs/react": "^4.2.6",
|
||||
"@uirouter/angularjs": "1.0.11",
|
||||
"@uirouter/react": "^1.0.7",
|
||||
|
|
|
|||
|
|
@ -2802,7 +2802,7 @@
|
|||
tabbable "^4.0.0"
|
||||
tslib "^2.3.0"
|
||||
|
||||
"@reach/popover@0.18.0":
|
||||
"@reach/popover@0.18.0", "@reach/popover@^0.18.0":
|
||||
version "0.18.0"
|
||||
resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.18.0.tgz#1eba3e9ed826ac69dfdf3b01a1dab15ca889b5fc"
|
||||
integrity sha512-mpnWWn4w74L2U7fcneVdA6Fz3yKWNdZIRMoK8s6H7F8U2dLM/qN7AjzjEBqi6LXKb3Uf1ge4KHSbMixW0BygJQ==
|
||||
|
|
|
|||
Loading…
Reference in New Issue