Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 20:35:25 +02:00
Code Issues Releases Activity

refactor(containers): migrate view to react [EE-2212] (#6577)

Browse source 
Co-authored-by: LP B <xAt0mZ@users.noreply.github.com>
This commit is contained in:
Chaim Lev-Ari 2022-08-11 07:33:29 +03:00 • committed by GitHub
parent 5ee570e075
commit bed4257194
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
71 changed files with 1616 additions and 875 deletions
Download patch file Download diff file Expand all files Collapse all files

97
app/docker/__module.js
View file

@ -96,94 +96,6 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
},
};
var containers = {
name: 'docker.containers',
url: '/containers',
views: {
'content@': {
templateUrl: './views/containers/containers.html',
controller: 'ContainersController',
},
},
};
var container = {
name: 'docker.containers.container',
url: '/:id?nodeName',
views: {
'content@': {
templateUrl: './views/containers/edit/container.html',
controller: 'ContainerController',
},
},
};
var containerAttachConsole = {
name: 'docker.containers.container.attach',
url: '/attach',
views: {
'content@': {
templateUrl: './views/containers/console/attach.html',
controller: 'ContainerConsoleController',
},
},
};
var containerExecConsole = {
name: 'docker.containers.container.exec',
url: '/exec',
views: {
'content@': {
templateUrl: './views/containers/console/exec.html',
controller: 'ContainerConsoleController',
},
},
};
var containerCreation = {
name: 'docker.containers.new',
url: '/new?nodeName&from',
views: {
'content@': {
templateUrl: './views/containers/create/createcontainer.html',
controller: 'CreateContainerController',
},
},
};
var containerInspect = {
name: 'docker.containers.container.inspect',
url: '/inspect',
views: {
'content@': {
templateUrl: './views/containers/inspect/containerinspect.html',
controller: 'ContainerInspectController',
},
},
};
var containerLogs = {
name: 'docker.containers.container.logs',
url: '/logs',
views: {
'content@': {
templateUrl: './views/containers/logs/containerlogs.html',
controller: 'ContainerLogsController',
},
},
};
var containerStats = {
name: 'docker.containers.container.stats',
url: '/stats',
views: {
'content@': {
templateUrl: './views/containers/stats/containerstats.html',
controller: 'ContainerStatsController',
},
},
};
const customTemplates = {
name: 'docker.templates.custom',
url: '/custom',
@ -613,14 +525,7 @@ angular.module('portainer.docker', ['portainer.app', reactModule]).config([
$stateRegistryProvider.register(configs);
$stateRegistryProvider.register(config);
$stateRegistryProvider.register(configCreation);
$stateRegistryProvider.register(containers);
$stateRegistryProvider.register(container);
$stateRegistryProvider.register(containerExecConsole);
$stateRegistryProvider.register(containerAttachConsole);
$stateRegistryProvider.register(containerCreation);
$stateRegistryProvider.register(containerInspect);
$stateRegistryProvider.register(containerLogs);
$stateRegistryProvider.register(containerStats);
$stateRegistryProvider.register(customTemplates);
$stateRegistryProvider.register(customTemplatesNew);
$stateRegistryProvider.register(customTemplatesEdit);

19
app/docker/react/components/index.ts
View file

@ -1,24 +1,13 @@
import angular from 'angular';
import { r2a } from '@/react-tools/react2angular';
import { ContainersDatatableContainer } from '@/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableContainer';
import { StackContainersDatatable } from '@/react/docker/stacks/ItemView/StackContainersDatatable';
import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions';
import { TemplateListDropdownAngular } from '@/react/docker/app-templates/TemplateListDropdown';
import { TemplateListSortAngular } from '@/react/docker/app-templates/TemplateListSort';
export const componentsModule = angular
.module('portainer.docker.react.components', [])
.component(
'containersDatatable',
r2a(ContainersDatatableContainer, [
'endpoint',
'isAddActionVisible',
'dataset',
'onRefresh',
'isHostColumnVisible',
'tableKey',
])
)
.component(
'containerQuickActions',
r2a(ContainerQuickActions, [
@ -30,4 +19,8 @@ export const componentsModule = angular
])
)
.component('templateListDropdown', TemplateListDropdownAngular)
.component('templateListSort', TemplateListSortAngular).name;
.component('templateListSort', TemplateListSortAngular)
.component(
'stackContainersDatatable',
r2a(StackContainersDatatable, ['environment', 'stackName'])
).name;

101
app/docker/react/views/containers.ts Normal file
View file

@ -0,0 +1,101 @@
import { StateRegistry } from '@uirouter/angularjs';
import angular from 'angular';
import { r2a } from '@/react-tools/react2angular';
import { ListView } from '@/react/docker/containers/ListView';
export const containersModule = angular
.module('portainer.docker.containers', [])
.component('containersView', r2a(ListView, ['endpoint']))
.config(config).name;
/* @ngInject */
function config($stateRegistryProvider: StateRegistry) {
$stateRegistryProvider.register({
name: 'docker.containers',
url: '/containers',
views: {
'content@': {
component: 'containersView',
},
},
});
$stateRegistryProvider.register({
name: 'docker.containers.container',
url: '/:id?nodeName',
views: {
'content@': {
templateUrl: '~@/docker/views/containers/edit/container.html',
controller: 'ContainerController',
},
},
});
$stateRegistryProvider.register({
name: 'docker.containers.container.attach',
url: '/attach',
views: {
'content@': {
templateUrl: '~@/docker/views/containers/console/attach.html',
controller: 'ContainerConsoleController',
},
},
});
$stateRegistryProvider.register({
name: 'docker.containers.container.exec',
url: '/exec',
views: {
'content@': {
templateUrl: '~@/docker/views/containers/console/exec.html',
controller: 'ContainerConsoleController',
},
},
});
$stateRegistryProvider.register({
name: 'docker.containers.new',
url: '/new?nodeName&from',
views: {
'content@': {
templateUrl: '~@/docker/views/containers/create/createcontainer.html',
controller: 'CreateContainerController',
},
},
});
$stateRegistryProvider.register({
name: 'docker.containers.container.inspect',
url: '/inspect',
views: {
'content@': {
templateUrl: '~@/docker/views/containers/inspect/containerinspect.html',
controller: 'ContainerInspectController',
},
},
});
$stateRegistryProvider.register({
name: 'docker.containers.container.logs',
url: '/logs',
views: {
'content@': {
templateUrl: '~@/docker/views/containers/logs/containerlogs.html',
controller: 'ContainerLogsController',
},
},
});
$stateRegistryProvider.register({
name: 'docker.containers.container.stats',
url: '/stats',
views: {
'content@': {
templateUrl: '~@/docker/views/containers/stats/containerstats.html',
controller: 'ContainerStatsController',
},
},
});
}

8
app/docker/react/views/index.ts
View file

@ -1,13 +1,15 @@
import angular from 'angular';
import { Gpu } from 'Docker/react/views/gpu';
import { ItemView } from '@/react/docker/networks/ItemView';
import { ItemView as NetworksItemView } from '@/react/docker/networks/ItemView';
import { r2a } from '@/react-tools/react2angular';
import { containersModule } from './containers';
export const viewsModule = angular
.module('portainer.docker.react.views', [])
.module('portainer.docker.react.views', [containersModule])
.component(
'gpu',
r2a(Gpu, ['values', 'onChange', 'gpus', 'usedGpus', 'usedAllGpus'])
)
.component('networkDetailsView', r2a(ItemView, [])).name;
.component('networkDetailsView', r2a(NetworksItemView, [])).name;

28
app/docker/services/system.service.ts
View file

@ -36,20 +36,6 @@ export async function getInfo(environmentId: EnvironmentId) {
}
}
function buildUrl(
environmentId: EnvironmentId,
action: string,
subAction = ''
) {
let url = `/endpoints/${environmentId}/docker/${action}`;
if (subAction) {
url += `/${subAction}`;
}
return url;
}
export function useInfo<TSelect = InfoResponse>(
environmentId: EnvironmentId,
select?: (info: InfoResponse) => TSelect
@ -74,3 +60,17 @@ export function useVersion<TSelect = VersionResponse>(
}
);
}
function buildUrl(
environmentId: EnvironmentId,
action: string,
subAction = ''
) {
let url = `/endpoints/${environmentId}/docker/${action}`;
if (subAction) {
url += `/${subAction}`;
}
return url;
}

15
app/docker/views/containers/containers.html
View file

@ -1,15 +0,0 @@
<page-header title="'Container list'" breadcrumbs="['Containers']" reload="true"> </page-header>
<information-panel-offline ng-if="offlineMode"></information-panel-offline>
<div class="row">
<div class="col-sm-12" ng-if="containers">
<containers-datatable
endpoint="endpoint"
dataset="containers"
is-host-column-visible="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
is-add-action-visible="true"
on-refresh="(getContainers)"
></containers-datatable>
</div>
</div>

60
app/docker/views/containers/containersController.js
View file

@ -1,60 +0,0 @@
angular.module('portainer.docker').controller('ContainersController', ContainersController);
import _ from 'lodash';
/* @ngInject */
function ContainersController($scope, ContainerService, Notifications, endpoint) {
$scope.offlineMode = endpoint.Status !== 1;
$scope.endpoint = endpoint;
$scope.getContainers = getContainers;
function getContainers() {
$scope.containers = null;
$scope.containers_t = null;
ContainerService.containers(1)
.then(function success(data) {
$scope.containers_t = data;
if ($scope.containers_t.length === 0) {
$scope.containers = $scope.containers_t;
return;
}
for (let item of $scope.containers_t) {
ContainerService.container(item.Id).then(function success(data) {
var Id = data.Id;
for (var i = 0; i < $scope.containers_t.length; i++) {
if (Id == $scope.containers_t[i].Id) {
const gpuOptions = _.find(data.HostConfig.DeviceRequests, function (o) {
return o.Driver === 'nvidia' || o.Capabilities[0][0] === 'gpu';
});
if (!gpuOptions) {
$scope.containers_t[i]['Gpus'] = 'none';
} else {
let gpuStr = 'all';
if (gpuOptions.Count !== -1) {
gpuStr = `id:${_.join(gpuOptions.DeviceIDs, ',')}`;
}
$scope.containers_t[i]['Gpus'] = `${gpuStr}`;
}
}
}
for (let item of $scope.containers_t) {
if (!Object.keys(item).includes('Gpus')) {
return;
}
}
$scope.containers = $scope.containers_t;
});
}
})
.catch(function error(err) {
Notifications.error('Failure', err, 'Unable to retrieve containers');
$scope.containers = [];
});
}
function initView() {
getContainers();
}
initView();
}