1
0
Fork 0
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:
Chaim Lev-Ari 2022-06-23 10:25:56 +03:00 committed by GitHub
parent f78a6568a6
commit 84611a90a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
118 changed files with 2284 additions and 1648 deletions

View file

@ -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>

View file

@ -1,15 +0,0 @@
angular.module('portainer.docker').component('dockerSidebar', {
templateUrl: './docker-sidebar.html',
bindings: {
isSidebarOpen: '<',
endpointApiVersion: '<',
swarmManagement: '<',
standaloneManagement: '<',
adminAccess: '<',
offlineMode: '<',
currentRouteName: '<',
endpointId: '<',
showStacks: '<',
},
});

View file

@ -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={() => {

View file

@ -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()}

View 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,
}
);
}

View file

@ -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);
});