mirror of
https://github.com/portainer/portainer.git
synced 2025-08-05 05:45:22 +02:00
refactor(sidebar): migrate sidebar to react [EE-2907] (#6725)
* refactor(sidebar): migrate sidebar to react [EE-2907] fixes [EE-2907] feat(sidebar): show label for help fix(sidebar): apply changes from ddExtension fix(sidebar): resolve conflicts style(ts): add explanation for ddExtension fix(sidebar): use enum for status refactor(sidebar): rename to EdgeComputeSidebar refactor(sidebar): removed the need of `ident` prop style(sidebar): add ref for mobile breakpoint refactor(app): document testing props refactor(sidebar): use single sidebar item refactor(sidebar): use section for nav refactor(sidebar): rename sidebarlink to link refactor(sidebar): memoize menu paths fix(kubectl-shell): infinite loop on hooks dependencies refactor(sidebar): use authorized element feat(k8s/shell): track open shell refactor(k8s/shell): remove memoization refactor(settings): move settings queries to queries fix(sidebar): close sidebar on mobile refactor(settings): use mutation helpers refactor(sidebar): remove memo refactor(sidebar): rename sidebar item for storybook refactor(sidebar): move to react gprefactor(sidebar): remove dependence on EndProvider feat(environments): rename settings type feat(kube): move kubeconfig button fix(sidebar): open submenus fix(sidebar): open on expand fix(sibebar): show kube shell correctly * fix(sidebar): import from react component * chore(tests): fix missing prop
This commit is contained in:
parent
f78a6568a6
commit
84611a90a1
118 changed files with 2284 additions and 1648 deletions
|
@ -1,186 +0,0 @@
|
|||
<sidebar-menu-item
|
||||
path="docker.dashboard"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-tachometer-alt fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="dockerSidebar-dashboard"
|
||||
title="Dashboard"
|
||||
>
|
||||
Dashboard
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu
|
||||
ng-if="!$ctrl.offlineMode"
|
||||
label="App Templates"
|
||||
icon-class="fa-rocket fa-fw"
|
||||
path="docker.templates"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
is-sidebar-open="$ctrl.isSidebarOpen"
|
||||
children-paths="[]"
|
||||
>
|
||||
<sidebar-menu-item
|
||||
path="docker.templates.custom"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
class-name="sidebar-sublist"
|
||||
data-cy="dockerSidebar-customTemplates"
|
||||
title="Custom Templates"
|
||||
>
|
||||
Custom Templates
|
||||
</sidebar-menu-item>
|
||||
</sidebar-menu>
|
||||
|
||||
<sidebar-menu-item
|
||||
ng-if="$ctrl.showStacks"
|
||||
path="docker.stacks"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-th-list fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="dockerSidebar-stacks"
|
||||
title="Stacks"
|
||||
>
|
||||
Stacks
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
ng-if="$ctrl.swarmManagement"
|
||||
path="docker.services"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-list-alt fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="dockerSidebar-services"
|
||||
title="Services"
|
||||
>
|
||||
Services
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
path="docker.containers"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-cubes fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="dockerSidebar-containers"
|
||||
title="Containers"
|
||||
>
|
||||
Containers
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
path="docker.images"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-clone fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="dockerSidebar-images"
|
||||
title="Images"
|
||||
>
|
||||
Images
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
path="docker.networks"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-sitemap fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="dockerSidebar-networks"
|
||||
title="Networks"
|
||||
>
|
||||
Networks
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
path="docker.volumes"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-hdd fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="dockerSidebar-volumes"
|
||||
title="Volumes"
|
||||
>
|
||||
Volumes
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
ng-if="$ctrl.endpointApiVersion >= 1.3 && $ctrl.swarmManagement"
|
||||
path="docker.configs"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-file-code fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="dockerSidebar-configs"
|
||||
title="Configs"
|
||||
>
|
||||
Configs
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
ng-if="$ctrl.endpointApiVersion >= 1.25 && $ctrl.swarmManagement"
|
||||
path="docker.secrets"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-user-secret fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="dockerSidebar-secrets"
|
||||
title="Secrets"
|
||||
>
|
||||
Secrets
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
ng-if="$ctrl.standaloneManagement && $ctrl.adminAccess && !$ctrl.offlineMode"
|
||||
path="docker.events"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-history fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="dockerSidebar-events"
|
||||
title="Events"
|
||||
>
|
||||
Events
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu
|
||||
ng-if="$ctrl.standaloneManagement"
|
||||
label="Host"
|
||||
icon-class="fa-th fa-fw"
|
||||
path="docker.host"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
is-sidebar-open="$ctrl.isSidebarOpen"
|
||||
children-paths="['docker.registries', 'docker.registries.access', 'docker.featuresConfiguration']"
|
||||
>
|
||||
<sidebar-menu-item
|
||||
ng-if="$ctrl.adminAccess"
|
||||
authorization="PortainerEndpointUpdateSettings"
|
||||
path="docker.featuresConfiguration"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
class-name="sidebar-sublist"
|
||||
data-cy="dockerSidebar-setup"
|
||||
title="Setup"
|
||||
>
|
||||
Setup
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item path="docker.registries" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist" data-cy="dockerSidebar-registries" title="Registries">
|
||||
Registries
|
||||
</sidebar-menu-item>
|
||||
</sidebar-menu>
|
||||
|
||||
<sidebar-menu
|
||||
ng-if="$ctrl.swarmManagement"
|
||||
label="Swarm"
|
||||
icon-class="fa-object-group fa-fw"
|
||||
path="docker.swarm"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
is-sidebar-open="$ctrl.isSidebarOpen"
|
||||
children-paths="['docker.registries', 'docker.registries.access', 'docker.featuresConfiguration']"
|
||||
>
|
||||
<sidebar-menu-item
|
||||
ng-if="$ctrl.adminAccess"
|
||||
authorization="PortainerEndpointUpdateSettings"
|
||||
path="docker.featuresConfiguration"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
class-name="sidebar-sublist"
|
||||
data-cy="swarmSidebar-setup"
|
||||
title="Setup"
|
||||
>
|
||||
Setup
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item path="docker.registries" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist" data-cy="swarmSidebar-registries" title="Registries">
|
||||
Registries
|
||||
</sidebar-menu-item>
|
||||
</sidebar-menu>
|
|
@ -1,15 +0,0 @@
|
|||
angular.module('portainer.docker').component('dockerSidebar', {
|
||||
templateUrl: './docker-sidebar.html',
|
||||
bindings: {
|
||||
isSidebarOpen: '<',
|
||||
|
||||
endpointApiVersion: '<',
|
||||
swarmManagement: '<',
|
||||
standaloneManagement: '<',
|
||||
adminAccess: '<',
|
||||
offlineMode: '<',
|
||||
currentRouteName: '<',
|
||||
endpointId: '<',
|
||||
showStacks: '<',
|
||||
},
|
||||
});
|
|
@ -66,7 +66,7 @@ export function NetworkContainersTable({
|
|||
<td>
|
||||
<Authorized authorizations="DockerNetworkDisconnect">
|
||||
<Button
|
||||
dataCy={`networkDetails-disconnect${container.Name}`}
|
||||
data-cy={`networkDetails-disconnect${container.Name}`}
|
||||
size="xsmall"
|
||||
color="danger"
|
||||
onClick={() => {
|
||||
|
|
|
@ -41,7 +41,7 @@ export function NetworkDetailsTable({
|
|||
{allowRemoveNetwork && (
|
||||
<Authorized authorizations="DockerNetworkDelete">
|
||||
<Button
|
||||
dataCy="networkDetails-deleteNetwork"
|
||||
data-cy="networkDetails-deleteNetwork"
|
||||
size="xsmall"
|
||||
color="danger"
|
||||
onClick={() => onRemoveNetworkClicked()}
|
||||
|
|
76
app/docker/services/system.service.ts
Normal file
76
app/docker/services/system.service.ts
Normal file
|
@ -0,0 +1,76 @@
|
|||
import { useQuery } from 'react-query';
|
||||
|
||||
import { EnvironmentId } from '@/portainer/environments/types';
|
||||
import axios, { parseAxiosError } from '@/portainer/services/axios';
|
||||
|
||||
export interface VersionResponse {
|
||||
ApiVersion: string;
|
||||
}
|
||||
|
||||
export async function getVersion(environmentId: EnvironmentId) {
|
||||
try {
|
||||
const { data } = await axios.get<VersionResponse>(
|
||||
buildUrl(environmentId, 'version')
|
||||
);
|
||||
return data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err as Error, 'Unable to retrieve version');
|
||||
}
|
||||
}
|
||||
|
||||
export interface InfoResponse {
|
||||
Swarm?: {
|
||||
NodeID: string;
|
||||
ControlAvailable: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
export async function getInfo(environmentId: EnvironmentId) {
|
||||
try {
|
||||
const { data } = await axios.get<InfoResponse>(
|
||||
buildUrl(environmentId, 'info')
|
||||
);
|
||||
return data;
|
||||
} catch (err) {
|
||||
throw parseAxiosError(err as Error, 'Unable to retrieve version');
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
) {
|
||||
return useQuery(
|
||||
['environment', environmentId, 'docker', 'info'],
|
||||
() => getInfo(environmentId),
|
||||
{
|
||||
select,
|
||||
}
|
||||
);
|
||||
}
|
||||
export function useVersion<TSelect = VersionResponse>(
|
||||
environmentId: EnvironmentId,
|
||||
select?: (info: VersionResponse) => TSelect
|
||||
) {
|
||||
return useQuery(
|
||||
['environment', environmentId, 'docker', 'version'],
|
||||
() => getVersion(environmentId),
|
||||
{
|
||||
select,
|
||||
}
|
||||
);
|
||||
}
|
|
@ -13,6 +13,7 @@ angular.module('portainer.docker').controller('ContainerConsoleController', [
|
|||
'HttpRequestHelper',
|
||||
'LocalStorage',
|
||||
'CONSOLE_COMMANDS_LABEL_PREFIX',
|
||||
'SidebarService',
|
||||
function (
|
||||
$scope,
|
||||
$state,
|
||||
|
@ -24,7 +25,8 @@ angular.module('portainer.docker').controller('ContainerConsoleController', [
|
|||
ExecService,
|
||||
HttpRequestHelper,
|
||||
LocalStorage,
|
||||
CONSOLE_COMMANDS_LABEL_PREFIX
|
||||
CONSOLE_COMMANDS_LABEL_PREFIX,
|
||||
SidebarService
|
||||
) {
|
||||
var socket, term;
|
||||
|
||||
|
@ -189,7 +191,7 @@ angular.module('portainer.docker').controller('ContainerConsoleController', [
|
|||
$scope.$apply();
|
||||
};
|
||||
|
||||
$scope.$watch('toggle', function () {
|
||||
$scope.$watch(SidebarService.isSidebarOpen, function () {
|
||||
setTimeout(resizefun, 400);
|
||||
});
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue