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.VirtualSize = data.VirtualSize;
|
||||||
this.ContainerCount = data.ContainerCount;
|
this.Used = data.Used;
|
||||||
|
|
||||||
if (data.Portainer && data.Portainer.Agent && data.Portainer.Agent.NodeName) {
|
if (data.Portainer && data.Portainer.Agent && data.Portainer.Agent.NodeName) {
|
||||||
this.NodeName = 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 { GpusInsights } from '@/react/docker/host/SetupView/GpusInsights';
|
||||||
import { InsightsBox } from '@/react/components/InsightsBox';
|
import { InsightsBox } from '@/react/components/InsightsBox';
|
||||||
import { BetaAlert } from '@/react/portainer/environments/update-schedules/common/BetaAlert';
|
import { BetaAlert } from '@/react/portainer/environments/update-schedules/common/BetaAlert';
|
||||||
|
import { ImagesDatatable } from '@/react/docker/images/ListView/ImagesDatatable/ImagesDatatable';
|
||||||
|
|
||||||
export const componentsModule = angular
|
export const componentsModule = angular
|
||||||
.module('portainer.docker.react.components', [])
|
.module('portainer.docker.react.components', [])
|
||||||
|
|
@ -66,4 +67,17 @@ export const componentsModule = angular
|
||||||
])
|
])
|
||||||
)
|
)
|
||||||
.component('betaAlert', r2a(BetaAlert, ['className', 'message', 'isHtml']))
|
.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 { getUniqueTagListFromImages } from '@/react/docker/images/utils';
|
||||||
import { ImageViewModel } from '../models/image';
|
import { ImageViewModel } from '../models/image';
|
||||||
import { ImageDetailsViewModel } from '../models/imageDetails';
|
import { ImageDetailsViewModel } from '../models/imageDetails';
|
||||||
|
|
@ -41,15 +42,10 @@ angular.module('portainer.docker').factory('ImageService', [
|
||||||
})
|
})
|
||||||
.then(function success(data) {
|
.then(function success(data) {
|
||||||
var containers = data.containers;
|
var containers = data.containers;
|
||||||
|
const containerByImageId = _.groupBy(containers, 'ImageID');
|
||||||
|
|
||||||
var images = data.images.map(function (item) {
|
var images = data.images.map(function (item) {
|
||||||
item.ContainerCount = 0;
|
item.Used = !!containerByImageId[item.Id] && containerByImageId[item.Id].length > 0;
|
||||||
for (var i = 0; i < containers.length; i++) {
|
|
||||||
var container = containers[i];
|
|
||||||
if (container.ImageID === item.Id) {
|
|
||||||
item.ContainerCount++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return new ImageViewModel(item);
|
return new ImageViewModel(item);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -44,20 +44,17 @@
|
||||||
</rd-widget>
|
</rd-widget>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-12">
|
<docker-images-datatable
|
||||||
<images-datatable
|
ng-if="images"
|
||||||
title-text="Images"
|
dataset="images"
|
||||||
title-icon="list"
|
is-host-column-visible="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
|
||||||
dataset="images"
|
on-download="(downloadAction)"
|
||||||
table-key="images"
|
on-remove="(confirmRemovalAction)"
|
||||||
order-by="RepoTags"
|
on-refresh="(getImages)"
|
||||||
show-host-column="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
|
is-export-in-progress="state.exportInProgress"
|
||||||
download-action="downloadAction"
|
storage-key="images"
|
||||||
remove-action="confirmRemove"
|
environment="endpoint"
|
||||||
force-remove-action="confirmForceRemove"
|
settings-store="settingsStore"
|
||||||
export-in-progress="state.exportInProgress"
|
containers="containers"
|
||||||
refresh-callback="getImages"
|
></docker-images-datatable>
|
||||||
></images-datatable>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ angular.module('portainer.docker').controller('ImagesController', [
|
||||||
'Blob',
|
'Blob',
|
||||||
'endpoint',
|
'endpoint',
|
||||||
'$async',
|
'$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.endpoint = endpoint;
|
||||||
$scope.isAdmin = Authentication.isAdmin();
|
$scope.isAdmin = Authentication.isAdmin();
|
||||||
|
|
||||||
|
|
@ -54,40 +54,32 @@ angular.module('portainer.docker').controller('ImagesController', [
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.confirmForceRemove = confirmForceRemove;
|
function confirmImageForceRemoval() {
|
||||||
function confirmForceRemove(selectedItems, force) {
|
return confirmDestructive({
|
||||||
return $async(async () => {
|
title: 'Are you sure?',
|
||||||
const confirmed = await confirmDestructive({
|
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.',
|
||||||
title: 'Are you sure?',
|
confirmButton: buildConfirmButton('Remove the image', 'danger'),
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
$scope.confirmRemove = confirmRemove;
|
function confirmRegularRemove() {
|
||||||
function confirmRemove(selectedItems) {
|
return confirmDestructive({
|
||||||
return $async(async () => {
|
title: 'Are you sure?',
|
||||||
const confirmed = await confirmDestructive({
|
message: 'Removing the image will remove all tags associated to that image. Are you sure you want to remove the image?',
|
||||||
title: 'Are you sure?',
|
confirmButton: buildConfirmButton('Remove the image', 'danger'),
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$scope.confirmRemovalAction = async function (selectedItems, force) {
|
||||||
|
const confirmed = await (force ? confirmImageForceRemoval() : confirmRegularRemove());
|
||||||
|
|
||||||
|
if (!confirmed) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$scope.removeAction(selectedItems, force);
|
||||||
|
};
|
||||||
|
|
||||||
function isAuthorizedToDownload(selectedItems) {
|
function isAuthorizedToDownload(selectedItems) {
|
||||||
for (var i = 0; i < selectedItems.length; i++) {
|
for (var i = 0; i < selectedItems.length; i++) {
|
||||||
var image = selectedItems[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 {
|
import {
|
||||||
AriaAttributes,
|
AriaAttributes,
|
||||||
ComponentType,
|
ComponentType,
|
||||||
|
forwardRef,
|
||||||
MouseEventHandler,
|
MouseEventHandler,
|
||||||
PropsWithChildren,
|
PropsWithChildren,
|
||||||
ReactNode,
|
ReactNode,
|
||||||
|
|
@ -39,9 +40,17 @@ export interface Props<TasProps = unknown>
|
||||||
type?: Type;
|
type?: Type;
|
||||||
as?: ComponentType<TasProps> | string;
|
as?: ComponentType<TasProps> | string;
|
||||||
onClick?: MouseEventHandler<HTMLButtonElement>;
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
||||||
|
mRef?: React.ForwardedRef<HTMLButtonElement>;
|
||||||
props?: TasProps;
|
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>({
|
export function Button<TasProps = unknown>({
|
||||||
type = 'button',
|
type = 'button',
|
||||||
color = 'primary',
|
color = 'primary',
|
||||||
|
|
@ -54,15 +63,19 @@ export function Button<TasProps = unknown>({
|
||||||
children,
|
children,
|
||||||
as = 'button',
|
as = 'button',
|
||||||
props,
|
props,
|
||||||
|
mRef,
|
||||||
...ariaProps
|
...ariaProps
|
||||||
}: PropsWithChildren<Props<TasProps>>) {
|
}: PropsWithChildren<Props<TasProps>>) {
|
||||||
const Component = as as 'button';
|
const Component = as as 'button';
|
||||||
return (
|
return (
|
||||||
<Component
|
<Component
|
||||||
|
ref={mRef}
|
||||||
/* eslint-disable-next-line react/button-has-type */
|
/* eslint-disable-next-line react/button-has-type */
|
||||||
type={type}
|
type={type}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
className={clsx(`btn btn-${color}`, sizeClass(size), className)}
|
className={clsx(`btn btn-${color}`, sizeClass(size), className, {
|
||||||
|
disabled,
|
||||||
|
})}
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
if (!disabled) {
|
if (!disabled) {
|
||||||
onClick?.(e);
|
onClick?.(e);
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,8 @@ import { Menu, MenuButton, MenuPopover } from '@reach/menu-button';
|
||||||
import { Column } from '@tanstack/react-table';
|
import { Column } from '@tanstack/react-table';
|
||||||
import { Check, Filter } from 'lucide-react';
|
import { Check, Filter } from 'lucide-react';
|
||||||
|
|
||||||
|
import { getValueAsArrayOfStrings } from '@/portainer/helpers/array';
|
||||||
|
|
||||||
import { Icon } from '@@/Icon';
|
import { Icon } from '@@/Icon';
|
||||||
|
|
||||||
interface MultipleSelectionFilterProps {
|
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),
|
...create(set),
|
||||||
} as T),
|
} 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 { useStore } from 'zustand';
|
||||||
|
|
||||||
import { useSearchBarState } from './SearchBar';
|
import { useSearchBarState } from './SearchBar';
|
||||||
import { BasicTableSettings, createPersistedStore } from './types';
|
import { BasicTableSettings, CreatePersistedStoreReturn } 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>('', '');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function useTableState<
|
export function useTableState<
|
||||||
TSettings extends BasicTableSettings = BasicTableSettings
|
TSettings extends BasicTableSettings = BasicTableSettings
|
||||||
>(store: ReturnType<Wrapper<TSettings>['wrapped']>, storageKey: string) {
|
>(store: CreatePersistedStoreReturn<TSettings>, storageKey: string) {
|
||||||
const settings = useStore(store);
|
const settings = useStore(store);
|
||||||
|
|
||||||
const [search, setSearch] = useSearchBarState(storageKey);
|
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 = {
|
export type DockerImageResponse = {
|
||||||
Containers: number;
|
Containers: number;
|
||||||
Created: number;
|
Created: number;
|
||||||
|
|
@ -9,4 +11,5 @@ export type DockerImageResponse = {
|
||||||
SharedSize: number;
|
SharedSize: number;
|
||||||
Size: number;
|
Size: number;
|
||||||
VirtualSize: number;
|
VirtualSize: number;
|
||||||
|
Portainer?: PortainerMetadata;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -50,6 +50,7 @@
|
||||||
"@reach/dialog": "^0.17.0",
|
"@reach/dialog": "^0.17.0",
|
||||||
"@reach/menu-button": "^0.16.1",
|
"@reach/menu-button": "^0.16.1",
|
||||||
"@tanstack/react-table": "^8.8.5",
|
"@tanstack/react-table": "^8.8.5",
|
||||||
|
"@reach/popover": "^0.18.0",
|
||||||
"@tippyjs/react": "^4.2.6",
|
"@tippyjs/react": "^4.2.6",
|
||||||
"@uirouter/angularjs": "1.0.11",
|
"@uirouter/angularjs": "1.0.11",
|
||||||
"@uirouter/react": "^1.0.7",
|
"@uirouter/react": "^1.0.7",
|
||||||
|
|
|
||||||
|
|
@ -2802,7 +2802,7 @@
|
||||||
tabbable "^4.0.0"
|
tabbable "^4.0.0"
|
||||||
tslib "^2.3.0"
|
tslib "^2.3.0"
|
||||||
|
|
||||||
"@reach/popover@0.18.0":
|
"@reach/popover@0.18.0", "@reach/popover@^0.18.0":
|
||||||
version "0.18.0"
|
version "0.18.0"
|
||||||
resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.18.0.tgz#1eba3e9ed826ac69dfdf3b01a1dab15ca889b5fc"
|
resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.18.0.tgz#1eba3e9ed826ac69dfdf3b01a1dab15ca889b5fc"
|
||||||
integrity sha512-mpnWWn4w74L2U7fcneVdA6Fz3yKWNdZIRMoK8s6H7F8U2dLM/qN7AjzjEBqi6LXKb3Uf1ge4KHSbMixW0BygJQ==
|
integrity sha512-mpnWWn4w74L2U7fcneVdA6Fz3yKWNdZIRMoK8s6H7F8U2dLM/qN7AjzjEBqi6LXKb3Uf1ge4KHSbMixW0BygJQ==
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue