mirror of
https://github.com/portainer/portainer.git
synced 2025-07-24 15:59:41 +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
GitHub
parent
f78a6568a6
commit
84611a90a1
118 changed files with 2284 additions and 1648 deletions
|
|
@ -1,75 +0,0 @@
|
|||
.shell-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #424242;
|
||||
background: rgb(245, 245, 245);
|
||||
border-top: 1px solid rgb(190, 190, 190);
|
||||
}
|
||||
|
||||
.shell-item {
|
||||
width: 150px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.shell-item-center {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
ul.sidebar li .shell-item-center a {
|
||||
border-left: 1px solid rgb(143, 143, 143);
|
||||
padding: 0px 5px;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
ul.sidebar li .shell-item-center a:hover {
|
||||
color: rgb(51, 122, 183);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.shell-item-center a {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.shell-item-right {
|
||||
height: 16px;
|
||||
width: 180px;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.shell-item-right i {
|
||||
padding: 0px 5px;
|
||||
cursor: pointer;
|
||||
color: rgb(89, 89, 89);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.shell-item-right i:hover {
|
||||
color: rgb(51, 122, 183);
|
||||
}
|
||||
|
||||
.shell-item + .shell-item {
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.normal-kubectl-shell {
|
||||
position: fixed;
|
||||
background: #000;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 495px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mini-kubectl-shell {
|
||||
position: fixed;
|
||||
background: #000;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 35px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
<button
|
||||
type="button"
|
||||
class="btn btn-xs btn-primary"
|
||||
ng-click="$ctrl.connectConsole()"
|
||||
ng-disabled="$ctrl.state.shell.connected"
|
||||
data-cy="k8sSidebar-shellButton"
|
||||
analytics-on
|
||||
analytics-category="kubernetes"
|
||||
analytics-event="kubernetes-kubectl-shell"
|
||||
>
|
||||
<i class="fa fa-terminal space-right"></i> kubectl shell
|
||||
</button>
|
||||
|
||||
<div ng-if="$ctrl.state.shell.connected" class="{{ $ctrl.state.css }}-kubectl-shell">
|
||||
<div class="shell-container">
|
||||
<div class="shell-item"><i class="fas fa-terminal" style="margin-right: 5px"></i>kubectl shell</div>
|
||||
<div class="shell-item-right">
|
||||
<i class="fas fa-redo-alt" ng-click="$ctrl.screenClear();" data-cy="k8sShell-refreshButton"></i>
|
||||
<i
|
||||
class="fas {{ $ctrl.state.icon }}"
|
||||
ng-click="$ctrl.miniRestore();"
|
||||
data-cy="{{ $ctrl.state.icon === '.fa-window-minimize' ? 'k8sShell-restore' : 'k8sShell-minimise' }}"
|
||||
></i>
|
||||
<i class="fas fa-times" ng-click="$ctrl.disconnect()" data-cy="k8sShell-closeButton"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="nopadding">
|
||||
<div>
|
||||
<div id="terminal-container" class="terminal-container">
|
||||
<div style="position: fixed; color: #fff">Loading Terminal...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import angular from 'angular';
|
||||
import controller from './kubectl-shell.controller';
|
||||
import './kubectl-shell.css';
|
||||
|
||||
angular.module('portainer.kubernetes').component('kubectlShell', {
|
||||
templateUrl: './kubectl-shell.html',
|
||||
controller,
|
||||
});
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import angular from 'angular';
|
||||
|
||||
angular.module('portainer.kubernetes').component('kubernetesSidebar', {
|
||||
templateUrl: './kubernetes-sidebar.html',
|
||||
bindings: {
|
||||
endpointId: '<',
|
||||
isSidebarOpen: '<',
|
||||
adminAccess: '<',
|
||||
},
|
||||
});
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
<sidebar-menu-item
|
||||
path="kubernetes.dashboard"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-tachometer-alt fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="k8sSidebar-dashboard"
|
||||
title="Dashboard"
|
||||
>
|
||||
Dashboard
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
path="kubernetes.templates.custom"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-rocket fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="k8sSidebar-customTemplates"
|
||||
title="Custom Templates"
|
||||
>
|
||||
Custom Templates
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
path="kubernetes.resourcePools"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-layer-group fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="k8sSidebar-namespaces"
|
||||
title="Namespaces"
|
||||
>
|
||||
Namespaces
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
path="kubernetes.templates.helm"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-dharmachakra fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="k8sSidebar-helm"
|
||||
title="Helm"
|
||||
>
|
||||
Helm
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
path="kubernetes.applications"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-laptop-code fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="k8sSidebar-applications"
|
||||
title="Applications"
|
||||
>
|
||||
Applications
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
path="kubernetes.configurations"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-file-code fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="k8sSidebar-configurations"
|
||||
title="ConfigMaps & Secrets"
|
||||
>
|
||||
ConfigMaps & Secrets
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
path="kubernetes.volumes"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
icon-class="fa-database fa-fw"
|
||||
class-name="sidebar-list"
|
||||
data-cy="k8sSidebar-volumes"
|
||||
title="Volumes"
|
||||
>
|
||||
Volumes
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu
|
||||
icon-class="fa-server fa-fw"
|
||||
label="Cluster"
|
||||
path="kubernetes.cluster"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
is-sidebar-open="$ctrl.isSidebarOpen"
|
||||
children-paths="['kubernetes.cluster', 'portainer.k8sendpoint.kubernetesConfig', 'portainer.k8sendpoint.securityConstraint', 'kubernetes.registries', 'kubernetes.registries.access']"
|
||||
data-cy="k8sSidebar-cluster"
|
||||
>
|
||||
<sidebar-menu-item
|
||||
ng-if="$ctrl.adminAccess"
|
||||
authorization="K8sClusterSetupRW"
|
||||
path="portainer.k8sendpoint.kubernetesConfig"
|
||||
path-params="{ id: $ctrl.endpointId }"
|
||||
class-name="sidebar-sublist"
|
||||
data-cy="k8sSidebar-setup"
|
||||
title="Setup"
|
||||
>
|
||||
Setup
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
authorization="K8sClusterSetupRW"
|
||||
path="portainer.k8sendpoint.securityConstraint"
|
||||
path-params="{ id: $ctrl.endpointId }"
|
||||
class-name="sidebar-sublist"
|
||||
data-cy="k8sSidebar-security-constraints"
|
||||
title="Security constraints"
|
||||
>
|
||||
Security constraints
|
||||
</sidebar-menu-item>
|
||||
|
||||
<sidebar-menu-item
|
||||
authorization="PortainerRegistryList"
|
||||
path="kubernetes.registries"
|
||||
path-params="{ endpointId: $ctrl.endpointId }"
|
||||
class-name="sidebar-sublist"
|
||||
data-cy="k8sSidebar-registries"
|
||||
title="Registries"
|
||||
>
|
||||
Registries
|
||||
</sidebar-menu-item>
|
||||
</sidebar-menu>
|
||||
Loading…
Add table
Add a link
Reference in a new issue