Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-05 13:55:21 +02:00
Code Issues Releases Activity

feat(docker): migrate files table to react [EE-4663] (#8916)

Browse source
This commit is contained in:
Chaim Lev-Ari 2023-07-16 10:59:58 +03:00 • committed by GitHub
parent 146681e1c7
commit 09f60c3277
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 529 additions and 229 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/agent/components/file-uploader/fileUploader.html
View file

@ -1,4 +0,0 @@
<button ng-if="!$ctrl.state.uploadInProgress" type="button" ngf-select="$ctrl.onFileSelected($file)" class="btn btn-light ng-scope">
<pr-icon icon="'upload'"></pr-icon>
</button>
<button ng-if="$ctrl.state.uploadInProgress" type="button" class="btn btn-sm btn-light" button-spinner="$ctrl.state.uploadInProgress"></button>

30
app/agent/components/file-uploader/fileUploaderController.js
View file

@ -1,30 +0,0 @@
export class FileUploaderController {
/* @ngInject */
constructor($async) {
Object.assign(this, { $async });
this.state = {
uploadInProgress: false,
};
this.onFileSelected = this.onFileSelected.bind(this);
this.onFileSelectedAsync = this.onFileSelectedAsync.bind(this);
}
onFileSelected(file) {
return this.$async(this.onFileSelectedAsync, file);
}
async onFileSelectedAsync(file) {
if (!file) {
return;
}
this.state.uploadInProgress = true;
try {
await this.uploadFile(file);
} finally {
this.state.uploadInProgress = false;
}
}
}

10
app/agent/components/file-uploader/index.js
View file

@ -1,10 +0,0 @@
import angular from 'angular';
import { FileUploaderController } from './fileUploaderController';
angular.module('portainer.agent').component('fileUploader', {
templateUrl: './fileUploader.html',
controller: FileUploaderController,
bindings: {
uploadFile: '<onFileSelected',
},
});

114
app/agent/components/files-datatable/filesDatatable.html
View file

@ -1,114 +0,0 @@
<div class="datatable">
<rd-widget>
<rd-widget-body classes="no-padding">
<div class="toolBar">
<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-model-options="{ debounce: 300 }"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search..."
auto-focus
/>
</div>
<file-uploader authorization="DockerAgentBrowsePut" ng-if="$ctrl.isUploadAllowed" on-file-selected="($ctrl.onFileSelectedForUpload)"> </file-uploader>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>
<table-column-header
col-title="'Name'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Name'"
is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Name')"
></table-column-header>
</th>
<th>
<table-column-header
col-title="'Size'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'Size'"
is-sorted-desc="$ctrl.state.orderBy === 'Size' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('Size')"
></table-column-header>
</th>
<th>
<table-column-header
col-title="'Last modification'"
can-sort="true"
is-sorted="$ctrl.state.orderBy === 'ModTime'"
is-sorted-desc="$ctrl.state.orderBy === 'ModTime' && $ctrl.state.reverseOrder"
ng-click="$ctrl.changeOrderBy('ModTime')"
></table-column-header>
</th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr ng-if="!$ctrl.isRoot">
<td colspan="4">
<button type="button" class="btn btn-link !ml-0 p-0 hover:no-underline" ng-click="$ctrl.goToParent()"
><pr-icon icon="'corner-left-up'"></pr-icon>Go to parent</button
>
</td>
</tr>
<tr ng-repeat="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder))">
<td>
<span ng-if="item.edit" class="vertical-center">
<input
class="input-sm"
type="text"
ng-model="item.newName"
on-enter-key="$ctrl.rename({ name: item.Name, newName: item.newName }); item.edit = false"
auto-focus
/>
<a class="interactive" ng-click="item.edit = false;"><pr-icon icon="'x'"></pr-icon></a>
<a class="interactive" ng-click="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;"><pr-icon icon="'check'"></pr-icon></a>
</span>
<span ng-if="!item.edit && item.Dir">
<button type="button" class="btn btn-link !ml-0 p-0 hover:no-underline" ng-click="$ctrl.browse({name: item.Name})" class="vertical-center"
><pr-icon icon="'folder'"></pr-icon>{{ item.Name }}</button
>
</span>
<span ng-if="!item.edit && !item.Dir" class="vertical-center"><pr-icon icon="'file'"></pr-icon>{{ item.Name }}</span>
</td>
<td>{{ item.Size | humansize }}</td>
<td>
{{ item.ModTime | getisodatefromtimestamp }}
</td>
<td>
<btn authorization="DockerAgentBrowseGet" class="btn btn-xs btn-secondary space-right" ng-click="$ctrl.download({ name: item.Name })" ng-if="!item.Dir">
<pr-icon icon="'download'"></pr-icon> Download
</btn>
<btn authorization="DockerAgentBrowseRename" class="btn btn-xs btn-secondary space-right" ng-click="item.newName = item.Name; item.edit = true">
<pr-icon icon="'edit'"></pr-icon> Rename
</btn>
<btn authorization="DockerAgentBrowseDelete" class="btn btn-xs btn-dangerlight" ng-click="$ctrl.delete({ name: item.Name })">
<pr-icon icon="'trash-2'"></pr-icon> Delete
</btn>
</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 files found.</td>
</tr>
</tbody>
</table>
</div>
</rd-widget-body>
</rd-widget>
</div>

24
app/agent/components/files-datatable/index.js
View file

@ -1,24 +0,0 @@
import angular from 'angular';
angular.module('portainer.agent').component('filesDatatable', {
templateUrl: './filesDatatable.html',
controller: 'GenericDatatableController',
bindings: {
titleText: '@',
titleIcon: '@',
dataset: '<',
tableKey: '@',
orderBy: '@',
reverseOrder: '<',
isRoot: '<',
goToParent: '&',
browse: '&',
rename: '&',
download: '&',
delete: '&',
isUploadAllowed: '<',
onFileSelectedForUpload: '<',
},
});

22
app/agent/components/host-browser/hostBrowser.html
View file

@ -1,16 +1,12 @@
<files-datatable
title-text="Host browser - {{ $ctrl.getRelativePath() }}"
title-icon="file"
<agent-host-browser-react
ng-if="$ctrl.files"
dataset="$ctrl.files"
table-key="host_browser"
order-by="Dir"
is-root="$ctrl.isRoot()"
go-to-parent="$ctrl.goToParent()"
browse="$ctrl.browse(name)"
rename="$ctrl.renameFile(name, newName)"
download="$ctrl.downloadFile(name)"
delete="$ctrl.confirmDeleteFile(name)"
is-upload-allowed="true"
on-go-to-parent="($ctrl.goToParent)"
relative-path="$ctrl.getRelativePath()"
on-browse="($ctrl.browse)"
on-rename="($ctrl.renameFile)"
on-download="($ctrl.downloadFile)"
on-delete="($ctrl.confirmDeleteFile)"
on-file-selected-for-upload="($ctrl.onFileSelectedForUpload)"
>
</files-datatable>
></agent-host-browser-react>

20
app/agent/components/volume-browser/volumeBrowser.html
View file

@ -1,15 +1,13 @@
<files-datatable
title-text="Volume browser"
title-icon="file"
<agent-volume-browser-react
ng-if="$ctrl.files"
dataset="$ctrl.files"
table-key="volume_browser"
order-by="Dir"
is-root="$ctrl.state.path === '/'"
go-to-parent="$ctrl.up()"
browse="$ctrl.browse(name)"
rename="$ctrl.rename(name, newName)"
download="$ctrl.download(name)"
delete="$ctrl.confirmDelete(name)"
on-go-to-parent="($ctrl.up)"
on-browse="($ctrl.browse)"
on-rename="($ctrl.rename)"
on-download="($ctrl.download)"
on-delete="($ctrl.confirmDelete)"
is-upload-allowed="$ctrl.isUploadEnabled"
on-file-selected-for-upload="($ctrl.onFileSelectedForUpload)"
></files-datatable>
relative-path="$ctrl.state.path"
></agent-volume-browser-react>