Files
portainer/app/docker/views/containers/console/containerConsoleController.js
T
claude code agent 0bf4e71b79 fix(stacks): keep the stack breadcrumb trail on container attribute sub-tabs
When a container is opened from a stack, the detail tab kept the stack
trail (PR #7) but the attribute sub-tabs (Logs, Stats, Inspect, Console,
Attach) dropped it: those tabs were registered only under the global
docker.containers.container.* tree, so navigating to one left the stack
state (and its inherited params) behind, and each sub-view set a hardcoded
"Containers > ..." breadcrumb.

- Register stack-scoped child states docker.stacks.stack.container.{attach,
  exec,inspect,logs,stats} mirroring the global ones, so the inherited stack
  params survive and the trail can be kept.
- Centralize the breadcrumb logic in containerBreadcrumbs.ts (moved out of
  ItemView, which re-exports it) and add isStackContainerState +
  getContainerSubTabBreadcrumbs + buildStackContainerLinkParams.
- ActionLinksRow links sub-tabs into the stack tree (with stack+container
  params) when opened from a stack, else the global states unchanged.
- InspectView + the logs/stats/console controllers render the stack-aware
  trail; set up-front (no name) so it survives the load window and errors.

Covers regular/external/orphaned stacks and the non-stack fallback,
matching the existing ItemView breadcrumb behavior. New unit tests in
containerBreadcrumbs.test.ts.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 02:25:04 +03:00

185 lines
6.5 KiB
JavaScript

import { baseHref } from '@/portainer/helpers/pathHelper';
import { commandStringToArray } from '@/docker/helpers/containers';
import { trimContainerName } from '@/docker/filters/utils';
import { getContainerSubTabBreadcrumbs } from '@/react/docker/containers/ItemView/containerBreadcrumbs';
import { isLinuxTerminalCommand, LINUX_SHELL_INIT_COMMANDS } from '@@/Terminal/Terminal';
angular.module('portainer.docker').controller('ContainerConsoleController', [
'$scope',
'$state',
'$transition$',
'ContainerService',
'ExecService',
'ImageService',
'Notifications',
'HttpRequestHelper',
'CONSOLE_COMMANDS_LABEL_PREFIX',
'endpoint',
function ($scope, $state, $transition$, ContainerService, ExecService, ImageService, Notifications, HttpRequestHelper, CONSOLE_COMMANDS_LABEL_PREFIX, endpoint) {
const states = Object.freeze({
disconnected: 0,
connecting: 1,
connected: 2,
});
$scope.loaded = false;
$scope.states = states;
$scope.state = states.disconnected;
$scope.formValues = {};
$scope.containerCommands = [];
$scope.shellUrl = '';
$scope.shellConnect = false;
$scope.onShellResize = null;
$scope.shellInitCommands = null;
$scope.$on('$destroy', function () {
$scope.disconnect();
});
$scope.onShellStateChange = function (state) {
$scope.$evalAsync(function () {
if (state === 'connected') {
$scope.state = states.connected;
} else if (state === 'disconnected') {
$scope.state = states.disconnected;
$scope.shellConnect = false;
}
});
};
$scope.connectAttach = function () {
if ($scope.state > states.disconnected) {
return;
}
$scope.state = states.connecting;
const attachId = $transition$.params().id;
ContainerService.container(endpoint.Id, attachId)
.then((details) => {
if (!details.State.Running) {
Notifications.error('Failure', details, 'Container ' + attachId + ' is not running!');
$scope.disconnect();
return;
}
$scope.onShellResize = function ({ rows, cols }) {
ContainerService.resizeTTY(endpoint.Id, attachId, cols, rows);
};
$scope.shellUrl = buildShellUrl('api/websocket/attach', { endpointId: $state.params.endpointId, id: attachId });
$scope.shellConnect = true;
})
.catch(function (err) {
Notifications.error('Error', err, 'Unable to retrieve container details');
$scope.disconnect();
});
};
$scope.connectExec = function () {
if ($scope.state > states.disconnected) {
return;
}
$scope.state = states.connecting;
const command = $scope.formValues.isCustomCommand ? $scope.formValues.customCommand : $scope.formValues.command;
const execConfig = {
AttachStdin: true,
AttachStdout: true,
AttachStderr: true,
Tty: true,
User: $scope.formValues.user,
Cmd: commandStringToArray(command),
};
ContainerService.createExec(endpoint.Id, $transition$.params().id, execConfig)
.then(function (data) {
$scope.onShellResize = function ({ rows, cols }) {
ExecService.resizeTTY(data.Id, cols, rows);
};
if (isLinuxTerminalCommand(execConfig.Cmd[0])) {
$scope.shellInitCommands = LINUX_SHELL_INIT_COMMANDS;
}
$scope.shellUrl = buildShellUrl('api/websocket/exec', { endpointId: $state.params.endpointId, id: data.Id });
$scope.shellConnect = true;
})
.catch(function (err) {
Notifications.error('Failure', err, 'Unable to exec into container');
$scope.disconnect();
});
};
$scope.disconnect = function () {
$scope.shellConnect = false;
$scope.state = states.disconnected;
$scope.onShellResize = null;
$scope.shellInitCommands = null;
};
$scope.autoconnectAttachView = function () {
return $scope.initView().then(function () {
if ($scope.container.State.Running) {
$scope.connectAttach();
}
});
};
$scope.initView = function () {
HttpRequestHelper.setPortainerAgentTargetHeader($transition$.params().nodeName);
// Set the trail up-front (without the container name) so it survives the
// load window and a load error; the success path fills in the name.
$scope.breadcrumbs = getContainerSubTabBreadcrumbs($transition$.to().name, $transition$.params(), '', 'Console');
return ContainerService.container(endpoint.Id, $transition$.params().id)
.then(function (data) {
$scope.container = data;
// Stack-aware breadcrumb: keeps the stack trail when the container was
// opened from a stack, falls back to the global Containers trail otherwise.
$scope.breadcrumbs = getContainerSubTabBreadcrumbs($transition$.to().name, $transition$.params(), trimContainerName(data.Name), 'Console');
return ImageService.image(data.Image);
})
.then(function (data) {
const containerLabels = $scope.container.Config.Labels;
$scope.imageOS = data.Os;
$scope.formValues.command = data.Os === 'windows' ? 'powershell' : 'bash';
$scope.containerCommands = Object.keys(containerLabels)
.filter(function (label) {
return label.indexOf(CONSOLE_COMMANDS_LABEL_PREFIX) === 0;
})
.map(function (label) {
return {
title: label.replace(CONSOLE_COMMANDS_LABEL_PREFIX, ''),
command: containerLabels[label],
};
});
$scope.loaded = true;
})
.catch(function (err) {
Notifications.error('Error', err, 'Unable to retrieve container details');
});
};
$scope.handleIsCustomCommandChange = function (enabled) {
$scope.$evalAsync(() => {
$scope.formValues.isCustomCommand = enabled;
});
};
function buildShellUrl(path, params) {
const base = window.location.origin.startsWith('http') ? `${window.location.origin}${baseHref()}` : baseHref();
let url =
base +
path +
'?' +
Object.keys(params)
.map((k) => k + '=' + params[k])
.join('&');
if ($transition$.params().nodeName) {
url += '&nodeName=' + $transition$.params().nodeName;
}
return url.startsWith('https') ? url.replace('https://', 'wss://') : url.replace('http://', 'ws://');
}
},
]);