Portainer
/
portainer
mirror of https://github.com/portainer/portainer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(sidebar): add indicator for an openable submenu (#5398) [EE-538]

pull/5456/head
Chaim Lev-Ari 2021-08-22 12:23:49 +03:00 committed by GitHub
parent d2d885359f
commit bbbc61dca9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 794 additions and 667 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/app.js
View File

@ -31,10 +31,6 @@ angular.module('portainer').run([
HttpRequestHelper.resetAgentHeaders(); HttpRequestHelper.resetAgentHeaders();
}); });
$state.defaultErrorHandler(function () {
// Do not log transitionTo errors
});
// Keep-alive Edge endpoints by sending a ping request every minute // Keep-alive Edge endpoints by sending a ping request every minute
$interval(function () { $interval(function () {
ping(EndpointProvider, SystemService); ping(EndpointProvider, SystemService);

172
app/assets/css/app.css
View File

@ -376,98 +376,6 @@ a[ng-click] {
margin: 0 auto; margin: 0 auto;
} }
ul.sidebar {
position: relative;
overflow: hidden;
flex-shrink: 0;
}
ul.sidebar .sidebar-title {
height: auto;
}
ul.sidebar .sidebar-title.endpoint-name {
color: #fff;
text-align: center;
text-indent: 0;
}
ul.sidebar .sidebar-list a {
font-size: 14px;
}
ul.sidebar .sidebar-list a.active {
color: #fff;
text-indent: 22px;
border-left: 3px solid #fff;
background: #2d3e63;
}
.sidebar-header {
height: 60px;
list-style: none;
text-indent: 20px;
font-size: 18px;
background: #2d3e63;
}
.sidebar-header a {
color: #fff;
}
.sidebar-header a:hover {
text-decoration: none;
}
.sidebar-header .menu-icon {
float: right;
padding-right: 28px;
line-height: 60px;
}
#page-wrapper:not(.open) .sidebar-footer-content {
display: none;
}
.sidebar-footer-content {
text-align: center;
}
.sidebar-footer-content .logo {
width: 100%;
max-width: 100px;
height: 100%;
max-height: 35px;
margin: 2px 0 2px 20px;
}
.sidebar-footer-content .update-notification {
font-size: 14px;
padding: 12px;
border-radius: 2px;
background-color: #ff851b;
margin-bottom: 5px;
}
.sidebar-footer-content .version {
font-size: 11px;
margin: 11px 20px 0 7px;
color: #fff;
}
#sidebar-wrapper {
display: flex;
flex-flow: column;
}
.sidebar-content {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
#image-layers .btn { #image-layers .btn {
padding: 0; padding: 0;
} }
@ -481,86 +389,6 @@ ul.sidebar .sidebar-list a.active {
font-size: 90%; font-size: 90%;
} }
ul.sidebar .sidebar-list a.active .menu-icon {
text-indent: 25px;
}
ul.sidebar .sidebar-list .sidebar-sublist a {
text-indent: 35px;
font-size: 12px;
color: #b2bfdc;
line-height: 36px;
}
ul.sidebar .sidebar-title {
line-height: 36px;
}
ul.sidebar .sidebar-title .form-control {
height: 36px;
padding: 6px 12px;
}
ul.sidebar .sidebar-list {
height: 36px;
}
ul.sidebar .sidebar-list a,
ul.sidebar .sidebar-list .sidebar-sublist a {
line-height: 36px;
}
ul.sidebar .sidebar-list .menu-icon {
line-height: 36px;
}
ul.sidebar .sidebar-list .sidebar-sublist a.active {
color: #fff;
border-left: 3px solid #fff;
background: #2d3e63;
}
@media (max-height: 785px) {
ul.sidebar .sidebar-title {
line-height: 26px;
}
ul.sidebar .sidebar-title .form-control {
height: 26px;
padding: 3px 6px;
}
ul.sidebar .sidebar-list {
height: 26px;
}
ul.sidebar .sidebar-list a,
ul.sidebar .sidebar-list .sidebar-sublist a {
font-size: 12px;
line-height: 26px;
}
ul.sidebar .sidebar-list .menu-icon {
line-height: 26px;
}
}
@media (min-height: 786px) and (max-height: 924px) {
ul.sidebar .sidebar-title {
line-height: 30px;
}
ul.sidebar .sidebar-title .form-control {
height: 30px;
padding: 5px 10px;
}
ul.sidebar .sidebar-list {
height: 30px;
}
ul.sidebar .sidebar-list a,
ul.sidebar .sidebar-list .sidebar-sublist a {
font-size: 12px;
line-height: 30px;
}
ul.sidebar .sidebar-list .menu-icon {
line-height: 30px;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
.margin-sm-top { .margin-sm-top {
margin-top: 5px; margin-top: 5px;

136
app/assets/css/rdash.css
View File

@ -14,9 +14,6 @@
padding-left: 70px; padding-left: 70px;
} }
} }
#page-wrapper.open #sidebar-wrapper {
left: 150px;
}
/** /**
* Hamburg Menu * Hamburg Menu
@ -254,139 +251,6 @@ div.input-mask {
padding-top: 7px; padding-top: 7px;
} }
/* #592727 RED */
/* #2f5927 GREEN */
/* #30426a BLUE (default)*/
/* Sidebar background color */
/* Sidebar header and footer color */
/* Sidebar title text colour */
/* Sidebar menu item hover color */
/**
* Sidebar
*/
#sidebar-wrapper {
background: #30426a;
}
ul.sidebar .sidebar-main a,
.sidebar-footer,
ul.sidebar .sidebar-list a:hover,
#page-wrapper:not(.open) ul.sidebar .sidebar-title.separator {
/* Sidebar header and footer color */
background: #2d3e63;
}
ul.sidebar {
position: absolute;
top: 0;
bottom: 0;
padding: 0;
margin: 0;
list-style: none;
text-indent: 20px;
overflow-x: hidden;
overflow-y: auto;
}
ul.sidebar li a {
color: #fff;
display: block;
float: left;
text-decoration: none;
width: 250px;
}
ul.sidebar .sidebar-main {
height: 65px;
}
ul.sidebar .sidebar-main a {
font-size: 18px;
line-height: 60px;
}
ul.sidebar .sidebar-main a:hover {
cursor: pointer;
}
ul.sidebar .sidebar-main .menu-icon {
float: right;
font-size: 18px;
padding-right: 28px;
line-height: 60px;
}
ul.sidebar .sidebar-title {
color: #738bc0;
font-size: 12px;
height: 35px;
line-height: 40px;
text-transform: uppercase;
transition: all 0.6s ease 0s;
}
ul.sidebar .sidebar-list {
height: 40px;
}
ul.sidebar .sidebar-list a {
text-indent: 25px;
font-size: 15px;
color: #b2bfdc;
line-height: 40px;
}
ul.sidebar .sidebar-list a:hover {
color: #fff;
border-left: 3px solid #e99d1a;
text-indent: 22px;
}
ul.sidebar .sidebar-list a:hover .menu-icon {
text-indent: 25px;
}
ul.sidebar .sidebar-list .menu-icon {
float: right;
padding-right: 29px;
line-height: 40px;
width: 70px;
}
#page-wrapper:not(.open) ul.sidebar {
bottom: 0;
}
#page-wrapper:not(.open) ul.sidebar .sidebar-title {
display: none;
height: 0px;
text-indent: -100px;
}
#page-wrapper:not(.open) ul.sidebar .sidebar-title.separator {
display: block;
height: 2px;
margin: 13px 0;
}
#page-wrapper:not(.open) ul.sidebar .sidebar-list a:hover span {
border-left: 3px solid #e99d1a;
text-indent: 22px;
}
#page-wrapper:not(.open) .sidebar-footer {
display: none;
}
.sidebar-footer {
position: absolute;
height: 40px;
bottom: 0;
width: 100%;
padding: 0;
margin: 0;
transition: all 0.6s ease 0s;
text-align: center;
}
.sidebar-footer div a {
color: #b2bfdc;
font-size: 12px;
line-height: 43px;
}
.sidebar-footer div a:hover {
color: #ffffff;
text-decoration: none;
}
/* #592727 RED */
/* #2f5927 GREEN */
/* #30426a BLUE (default)*/
/* Sidebar background color */
/* Sidebar header and footer color */
/* Sidebar title text colour */
/* Sidebar menu item hover color */
/** /**
* Widgets * Widgets
*/ */

8
app/azure/components/azure-sidebar-content/azure-sidebar-content.js
View File

@ -1,8 +0,0 @@
import angular from 'angular';
angular.module('portainer.azure').component('azureSidebarContent', {
templateUrl: './azureSidebarContent.html',
bindings: {
endpointId: '<',
},
});

6
app/azure/components/azure-sidebar-content/azureSidebarContent.html
View File

@ -1,6 +0,0 @@
<li class="sidebar-list">
<a ui-sref="azure.dashboard({endpointId: $ctrl.endpointId})" ui-sref-active="active">Dashboard <span class="menu-icon fa fa-tachometer-alt fa-fw"></span></a>
</li>
<li class="sidebar-list">
<a ui-sref="azure.containerinstances({endpointId: $ctrl.endpointId})" ui-sref-active="active">Container instances <span class="menu-icon fa fa-cubes fa-fw"></span></a>
</li>

7
app/azure/components/azure-sidebar/azure-sidebar.html Normal file
View File

@ -0,0 +1,7 @@
<sidebar-menu-item path="azure.dashboard" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-tachometer-alt fa-fw" class-name="sidebar-list">
Dashboard
</sidebar-menu-item>
<sidebar-menu-item path="azure.containerinstances" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-cubes fa-fw" class-name="sidebar-list">
Container instances
</sidebar-menu-item>

8
app/azure/components/azure-sidebar/index.js Normal file
View File

@ -0,0 +1,8 @@
import angular from 'angular';
angular.module('portainer.azure').component('azureSidebar', {
templateUrl: './azure-sidebar.html',
bindings: {
endpointId: '<',
},
});

121
app/docker/components/docker-sidebar/docker-sidebar.html Normal file
View File

@ -0,0 +1,121 @@
<sidebar-menu-item path="docker.dashboard" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-tachometer-alt fa-fw" class-name="sidebar-list">
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">
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">
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">
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">
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">
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">
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">
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"
>
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"
>
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"
>
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']"
>
<div ng-if="$ctrl.adminAccess">
<sidebar-menu-item
authorization="PortainerEndpointUpdateSettings"
path="docker.featuresConfiguration"
path-params="{ endpointId: $ctrl.endpointId }"
class-name="sidebar-sublist"
>
Setup
</sidebar-menu-item>
<sidebar-menu-item authorization="PortainerRegistryList" path="docker.registries" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist">
Registries
</sidebar-menu-item>
</div>
</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']"
>
<div ng-if="$ctrl.adminAccess">
<sidebar-menu-item
authorization="PortainerEndpointUpdateSettings"
path="docker.featuresConfiguration"
path-params="{ endpointId: $ctrl.endpointId }"
class-name="sidebar-sublist"
>
Setup
</sidebar-menu-item>
<sidebar-menu-item authorization="PortainerRegistryList" path="docker.registries" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist">
Registries
</sidebar-menu-item>
</div>
</sidebar-menu>

7
app/docker/components/dockerSidebarContent/docker-sidebar-content.js → app/docker/components/docker-sidebar/docker-sidebar.js
View File

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

53
app/docker/components/dockerSidebarContent/dockerSidebarContent.html
View File

@ -1,53 +0,0 @@
<li class="sidebar-list">
<a ui-sref="docker.dashboard({endpointId: $ctrl.endpointId})" ui-sref-active="active">Dashboard <span class="menu-icon fa fa-tachometer-alt fa-fw"></span></a>
</li>
<li class="sidebar-list" ng-if="!$ctrl.offlineMode" authorization="DockerContainerCreate, PortainerStackCreate">
<a ui-sref="docker.templates({endpointId: $ctrl.endpointId})" ui-sref-active="active">App Templates <span class="menu-icon fa fa-rocket fa-fw"></span></a>
<div class="sidebar-sublist" ng-if="$ctrl.toggle && $ctrl.currentRouteName.includes('docker.templates')">
<a ui-sref="docker.templates.custom({endpointId: $ctrl.endpointId})" ui-sref-active="active">Custom Templates</a>
</div>
</li>
<li class="sidebar-list" ng-if="$ctrl.showStacks">
<a ui-sref="docker.stacks({endpointId: $ctrl.endpointId})" ui-sref-active="active">Stacks <span class="menu-icon fa fa-th-list fa-fw"></span></a>
</li>
<li class="sidebar-list" ng-if="$ctrl.swarmManagement">
<a ui-sref="docker.services({endpointId: $ctrl.endpointId})" ui-sref-active="active">Services <span class="menu-icon fa fa-list-alt fa-fw"></span></a>
</li>
<li class="sidebar-list">
<a ui-sref="docker.containers({endpointId: $ctrl.endpointId})" ui-sref-active="active">Containers <span class="menu-icon fa fa-cubes fa-fw"></span></a>
</li>
<li class="sidebar-list">
<a ui-sref="docker.images({endpointId: $ctrl.endpointId})" ui-sref-active="active">Images <span class="menu-icon fa fa-clone fa-fw"></span></a>
</li>
<li class="sidebar-list">
<a ui-sref="docker.networks({endpointId: $ctrl.endpointId})" ui-sref-active="active">Networks <span class="menu-icon fa fa-sitemap fa-fw"></span></a>
</li>
<li class="sidebar-list">
<a ui-sref="docker.volumes({endpointId: $ctrl.endpointId})" ui-sref-active="active">Volumes <span class="menu-icon fa fa-hdd fa-fw"></span></a>
</li>
<li class="sidebar-list" ng-if="$ctrl.endpointApiVersion >= 1.3 && $ctrl.swarmManagement">
<a ui-sref="docker.configs({endpointId: $ctrl.endpointId})" ui-sref-active="active">Configs <span class="menu-icon fa fa-file-code fa-fw"></span></a>
</li>
<li class="sidebar-list" ng-if="$ctrl.endpointApiVersion >= 1.25 && $ctrl.swarmManagement">
<a ui-sref="docker.secrets({endpointId: $ctrl.endpointId})" ui-sref-active="active">Secrets <span class="menu-icon fa fa-user-secret fa-fw"></span></a>
</li>
<li class="sidebar-list" ng-if="$ctrl.standaloneManagement && $ctrl.adminAccess && !$ctrl.offlineMode">
<a ui-sref="docker.events({endpointId: $ctrl.endpointId})" ui-sref-active="active">Events <span class="menu-icon fa fa-history fa-fw"></span></a>
</li>
<li class="sidebar-list">
<a ng-if="$ctrl.standaloneManagement" ui-sref="docker.host({endpointId: $ctrl.endpointId})" ui-sref-active="active">Host <span class="menu-icon fa fa-th fa-fw"></span></a>
<a ng-if="$ctrl.swarmManagement" ui-sref="docker.swarm({endpointId: $ctrl.endpointId})" ui-sref-active="active">Swarm <span class="menu-icon fa fa-object-group fa-fw"></span></a>
<div
ng-if="$ctrl.adminAccess && ['docker.swarm', 'docker.host', 'docker.registries', 'docker.registries.access', 'docker.featuresConfiguration'].includes($ctrl.currentRouteName)"
>
<div class="sidebar-sublist">
<a ui-sref="docker.featuresConfiguration({endpointId: $ctrl.endpointId})" ui-sref-active="active">Setup</a>
</div>
<div class="sidebar-sublist">
<a ui-sref="docker.registries({endpointId: $ctrl.endpointId})" ui-sref-active="active">Registries</a>
</div>
</div>
</li>

31
app/kubernetes/components/kubernetes-sidebar-content/kubernetesSidebarContent.html
View File

@ -1,31 +0,0 @@
<li class="sidebar-list">
<a ui-sref="kubernetes.dashboard({endpointId: $ctrl.endpointId})" ui-sref-active="active">Dashboard <span class="menu-icon fa fa-tachometer-alt fa-fw"></span></a>
</li>
<li class="sidebar-list">
<a ui-sref="kubernetes.resourcePools({endpointId: $ctrl.endpointId})" ui-sref-active="active">Namespaces <span class="menu-icon fa fa-layer-group fa-fw"></span></a>
</li>
<li class="sidebar-list">
<a ui-sref="kubernetes.applications({endpointId: $ctrl.endpointId})" ui-sref-active="active">Applications <span class="menu-icon fa fa-laptop-code fa-fw"></span></a>
</li>
<li class="sidebar-list">
<a ui-sref="kubernetes.configurations({endpointId: $ctrl.endpointId})" ui-sref-active="active">Configurations <span class="menu-icon fa fa-file-code fa-fw"></span></a>
</li>
<li class="sidebar-list">
<a ui-sref="kubernetes.volumes({endpointId: $ctrl.endpointId})" ui-sref-active="active">Volumes <span class="menu-icon fa fa-database fa-fw"></span></a>
</li>
<li class="sidebar-list">
<a ui-sref="kubernetes.cluster({endpointId: $ctrl.endpointId})" ui-sref-active="active">Cluster <span class="menu-icon fa fa-server fa-fw"></span></a>
<div
ng-if="
$ctrl.adminAccess &&
['kubernetes.cluster', 'portainer.endpoints.endpoint.kubernetesConfig', 'kubernetes.registries', 'kubernetes.registries.access'].includes($ctrl.currentState)
"
>
<div class="sidebar-sublist">
<a ui-sref="portainer.endpoints.endpoint.kubernetesConfig({id: $ctrl.endpointId})" ui-sref-active="active">Setup</a>
</div>
<div class="sidebar-sublist">
<a ui-sref="kubernetes.registries({endpointId: $ctrl.endpointId})" ui-sref-active="active">Registries</a>
</div>
</div>
</li>

8
app/kubernetes/components/kubernetes-sidebar-content/kubernetesSidebarContent.js
View File

@ -1,8 +0,0 @@
angular.module('portainer.kubernetes').component('kubernetesSidebarContent', {
templateUrl: './kubernetesSidebarContent.html',
bindings: {
adminAccess: '<',
endpointId: '<',
currentState: '<',
},
});

9
app/kubernetes/components/kubernetes-sidebar/index.js Normal file
View File

@ -0,0 +1,9 @@
import angular from 'angular';
angular.module('portainer.kubernetes').component('kubernetesSidebar', {
templateUrl: './kubernetes-sidebar.html',
bindings: {
endpointId: '<',
isSidebarOpen: '<',
},
});

38
app/kubernetes/components/kubernetes-sidebar/kubernetes-sidebar.html Normal file
View File

@ -0,0 +1,38 @@
<sidebar-menu-item path="kubernetes.dashboard" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-tachometer-alt fa-fw" class-name="sidebar-list">
Dashboard
</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">
Namespaces
</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">
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">
Configurations
</sidebar-menu-item>
<sidebar-menu-item path="kubernetes.volumes" path-params="{ endpointId: $ctrl.endpointId }" icon-class="fa-database fa-fw" class-name="sidebar-list">
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.endpoints.endpoint.kubernetesConfig', 'kubernetes.registries', 'kubernetes.registries.access']"
>
<div ng-if="$ctrl.adminAccess">
<sidebar-menu-item authorization="K8sClusterSetupRW" path="portainer.endpoints.endpoint.kubernetesConfig" path-params="{ id: $ctrl.endpointId }" class-name="sidebar-sublist">
Setup
</sidebar-menu-item>
<sidebar-menu-item authorization="PortainerRegistryList" path="kubernetes.registries" path-params="{ endpointId: $ctrl.endpointId }" class-name="sidebar-sublist">
Registries
</sidebar-menu-item>
</div>
</sidebar-menu>

3
app/portainer/components/index.js
View File

@ -1,7 +1,8 @@
import angular from 'angular'; import angular from 'angular';
import sidebarModule from './sidebar';
import gitFormModule from './forms/git-form'; import gitFormModule from './forms/git-form';
import porAccessManagementModule from './accessManagement'; import porAccessManagementModule from './accessManagement';
import formComponentsModule from './form-components'; import formComponentsModule from './form-components';
export default angular.module('portainer.app.components', [gitFormModule, porAccessManagementModule, formComponentsModule]).name; export default angular.module('portainer.app.components', [sidebarModule, gitFormModule, porAccessManagementModule, formComponentsModule]).name;

12
app/portainer/components/sidebar/index.js Normal file
View File

@ -0,0 +1,12 @@
import angular from 'angular';
import './sidebar.css';
import { sidebarMenu } from './sidebar-menu';
import { sidebarSection } from './sidebar-section';
import { sidebarMenuItem } from './sidebar-menu-item';
export default angular
.module('portainer.app.components.sidebar', [])
.component('sidebarMenu', sidebarMenu)
.component('sidebarMenuItem', sidebarMenuItem)
.component('sidebarSection', sidebarSection).name;

12
app/portainer/components/sidebar/sidebar-menu-item/index.js Normal file
View File

@ -0,0 +1,12 @@
import './sidebar-menu-item.css';
export const sidebarMenuItem = {
templateUrl: './sidebar-menu-item.html',
bindings: {
path: '@',
pathParams: '<',
iconClass: '@',
className: '@',
},
transclude: true,
};

4
app/portainer/components/sidebar/sidebar-menu-item/sidebar-menu-item.css Normal file
View File

@ -0,0 +1,4 @@
.sidebar-menu-item > a {
display: flex;
justify-content: space-between;
}

6
app/portainer/components/sidebar/sidebar-menu-item/sidebar-menu-item.html Normal file
View File

@ -0,0 +1,6 @@
<li class="sidebar-menu-item" ng-class="$ctrl.className">
<a ui-state="$ctrl.path" ui-state-params="$ctrl.pathParams" ui-sref-active="active">
<ng-transclude></ng-transclude>
<span ng-if="$ctrl.iconClass" class="menu-icon fa" ng-class="$ctrl.iconClass"></span>
</a>
</li>

18
app/portainer/components/sidebar/sidebar-menu/index.js Normal file
View File

@ -0,0 +1,18 @@
import './sidebar-menu.css';
import controller from './sidebar-menu.controller.js';
export const sidebarMenu = {
templateUrl: './sidebar-menu.html',
controller,
bindings: {
iconClass: '@',
path: '@', // string
pathParams: '<', //object, corresponds to https://ui-router.github.io/ng1/docs/latest/modules/directives.html#uistatedirective
childrenPaths: '<', // []string (globs)
label: '@', // string
isSidebarOpen: '<',
currentState: '@',
},
transclude: true,
};

45
app/portainer/components/sidebar/sidebar-menu/sidebar-menu.controller.js Normal file
View File

@ -0,0 +1,45 @@
class SidebarMenuController {
/* @ngInject */
constructor($state) {
this.$state = $state;
this.state = {
forceOpen: false,
};
}
isOpen() {
if (!this.isSidebarOpen) {
return false;
}
if (this.state.forceOpen) {
return true;
}
return this.isOpenByPathState();
}
isOpenByPathState() {
const currentName = this.$state.current.name;
return currentName.startsWith(this.path) || this.childrenPaths.includes(currentName);
}
onClickArrow(event) {
event.stopPropagation();
event.preventDefault();
// prevent toggling when menu is open by state
if (this.isOpenByPathState()) {
return;
}
this.state.forceOpen = !this.state.forceOpen;
}
$onInit() {
this.childrenPaths = this.childrenPaths || [];
}
}
export default SidebarMenuController;

15
app/portainer/components/sidebar/sidebar-menu/sidebar-menu.css Normal file
View File

@ -0,0 +1,15 @@
.sidebar-menu .sidebar-menu-head {
position: relative;
}
.sidebar-menu .sidebar-menu-head .sidebar-menu-indicator {
background: none;
border: 0;
width: fit-content;
height: fit-content;
color: white;
margin: 0 10px;
padding: 0;
position: absolute;
left: -5px;
}

14
app/portainer/components/sidebar/sidebar-menu/sidebar-menu.html Normal file
View File

@ -0,0 +1,14 @@
<li class="sidebar-list sidebar-menu">
<sidebar-menu-item path="{{::$ctrl.path }}" path-params="$ctrl.pathParams" icon-class="{{::$ctrl.iconClass}}">
<div class="sidebar-menu-head">
<button ng-click="$ctrl.onClickArrow($event)" class="small sidebar-menu-indicator">
<i class="fas" ng-class="$ctrl.isOpen() ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
</button>
{{ ::$ctrl.label }}
</div>
</sidebar-menu-item>
<div class="sidebar-list-items" ng-if="$ctrl.isOpen()">
<ng-transclude></ng-transclude>
</div>
</li>

7
app/portainer/components/sidebar/sidebar-section/index.js Normal file
View File

@ -0,0 +1,7 @@
export const sidebarSection = {
templateUrl: './sidebar-section.html',
transclude: true,
bindings: {
title: '@',
},
};

7
app/portainer/components/sidebar/sidebar-section/sidebar-section.html Normal file
View File

@ -0,0 +1,7 @@
<div class="sidebar-section">
<li class="sidebar-title">
<span>{{ ::$ctrl.title }}</span>
</li>
<div class="sidebar-section-items" ng-transclude> </div>
</div>

326
app/portainer/components/sidebar/sidebar.css Normal file
View File

@ -0,0 +1,326 @@
#page-wrapper.open #sidebar-wrapper {
left: 150px;
}
/* #592727 RED */
/* #2f5927 GREEN */
/* #30426a BLUE (default)*/
/* Sidebar background color */
/* Sidebar header and footer color */
/* Sidebar title text colour */
/* Sidebar menu item hover color */
/**
* Sidebar
*/
#sidebar-wrapper {
background: #30426a;
}
ul.sidebar .sidebar-main a,
.sidebar-footer,
ul.sidebar .sidebar-list a:hover,
#page-wrapper:not(.open) ul.sidebar .sidebar-title.separator {
/* Sidebar header and footer color */
background: #2d3e63;
}
ul.sidebar {
position: absolute;
top: 0;
bottom: 0;
padding: 0;
margin: 0;
list-style: none;
text-indent: 20px;
overflow-x: hidden;
overflow-y: auto;
}
ul.sidebar li a {
color: #fff;
text-decoration: none;
width: 250px;
}
ul.sidebar .sidebar-main {
height: 65px;
}
ul.sidebar .sidebar-main a {
font-size: 18px;
line-height: 60px;
}
ul.sidebar .sidebar-main a:hover {
cursor: pointer;
}
ul.sidebar .sidebar-main .menu-icon {
float: right;
font-size: 18px;
padding-right: 28px;
line-height: 60px;
}
ul.sidebar .sidebar-title {
color: #738bc0;
font-size: 12px;
height: 35px;
line-height: 40px;
text-transform: uppercase;
transition: all 0.6s ease 0s;
}
ul.sidebar .sidebar-list a {
text-indent: 25px;
font-size: 15px;
color: #b2bfdc;
line-height: 40px;
padding-left: 5px;
border-left: 3px solid transparent;
}
ul.sidebar .sidebar-list a:hover {
color: #fff;
border-left-color: #e99d1a;
}
ul.sidebar .sidebar-list a:hover .menu-icon {
text-indent: 25px;
}
ul.sidebar .sidebar-list .menu-icon {
padding-right: 30px;
line-height: 40px;
width: fit-content;
}
#page-wrapper:not(.open) ul.sidebar {
bottom: 0;
}
#page-wrapper:not(.open) ul.sidebar .sidebar-title {
display: none;
height: 0px;
text-indent: -100px;
}
#page-wrapper:not(.open) ul.sidebar .sidebar-title.separator {
display: block;
height: 2px;
margin: 13px 0;
}
#page-wrapper:not(.open) ul.sidebar .sidebar-list a:hover span {
border-left: 3px solid #e99d1a;
text-indent: 22px;
}
#page-wrapper:not(.open) .sidebar-footer {
display: none;
}
.sidebar-footer {
position: absolute;
height: 40px;
bottom: 0;
width: 100%;
padding: 0;
margin: 0;
transition: all 0.6s ease 0s;
text-align: center;
}
.sidebar-footer div a {
color: #b2bfdc;
font-size: 12px;
line-height: 43px;
}
.sidebar-footer div a:hover {
color: #ffffff;
text-decoration: none;
}
/* #592727 RED */
/* #2f5927 GREEN */
/* #30426a BLUE (default)*/
/* Sidebar background color */
/* Sidebar header and footer color */
/* Sidebar title text colour */
/* Sidebar menu item hover color */
ul.sidebar {
position: relative;
overflow: hidden;
flex-shrink: 0;
}
ul.sidebar .sidebar-title {
height: auto;
}
ul.sidebar .sidebar-title.endpoint-name {
color: #fff;
text-align: center;
text-indent: 0;
}
ul.sidebar .sidebar-list a {
font-size: 14px;
}
ul.sidebar .sidebar-list a.active {
color: #fff;
border-left-color: #fff;
background: #2d3e63;
}
.sidebar-header {
height: 60px;
list-style: none;
text-indent: 20px;
font-size: 18px;
background: #2d3e63;
}
.sidebar-header a {
color: #fff;
}
.sidebar-header a:hover {
text-decoration: none;
}
.sidebar-header .menu-icon {
float: right;
padding-right: 28px;
line-height: 60px;
}
#page-wrapper:not(.open) .sidebar-footer-content {
display: none;
}
.sidebar-footer-content {
text-align: center;
}
.sidebar-footer-content .logo {
width: 100%;
max-width: 100px;
height: 100%;
max-height: 35px;
margin: 2px 0 2px 20px;
}
.sidebar-footer-content .update-notification {
font-size: 14px;
padding: 12px;
border-radius: 2px;
background-color: #ff851b;
margin-bottom: 5px;
}
.sidebar-footer-content .version {
font-size: 11px;
margin: 11px 20px 0 7px;
color: #fff;
}
.sidebar-footer-content .edition-version {
font-size: 10px;
margin-bottom: 8px;
color: #fff;
}
#sidebar-wrapper {
display: flex;
flex-flow: column;
}
.sidebar-content {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
ul.sidebar .sidebar-list a.active .menu-icon {
text-indent: 25px;
}
ul.sidebar .sidebar-list .sidebar-sublist a {
text-indent: 35px;
font-size: 12px;
color: #b2bfdc;
line-height: 36px;
}
ul.sidebar .sidebar-title {
line-height: 36px;
}
ul.sidebar .sidebar-title .form-control {
height: 36px;
padding: 6px 12px;
}
ul.sidebar .sidebar-list a,
ul.sidebar .sidebar-list .sidebar-sublist a {
line-height: 36px;
}
ul.sidebar .sidebar-list .menu-icon {
line-height: 36px;
}
ul.sidebar .sidebar-list .sidebar-sublist a.active {
color: #fff;
border-left: 3px solid #fff;
background: #2d3e63;
}
@media (max-height: 785px) {
ul.sidebar .sidebar-title {
line-height: 26px;
}
ul.sidebar .sidebar-title .form-control {
height: 26px;
padding: 3px 6px;
}
ul.sidebar .sidebar-list a,
ul.sidebar .sidebar-list .sidebar-sublist a {
font-size: 12px;
line-height: 26px;
}
ul.sidebar .sidebar-list .menu-icon {
line-height: 26px;
}
}
@media (min-height: 786px) and (max-height: 924px) {
ul.sidebar .sidebar-title {
line-height: 30px;
}
ul.sidebar .sidebar-title .form-control {
height: 30px;
padding: 5px 10px;
}
ul.sidebar .sidebar-list a,
ul.sidebar .sidebar-list .sidebar-sublist a {
font-size: 12px;
line-height: 30px;
}
ul.sidebar .sidebar-list .menu-icon {
line-height: 30px;
}
}

229
app/portainer/views/sidebar/sidebar.html
View File

@ -9,193 +9,92 @@
</div> </div>
<div class="sidebar-content"> <div class="sidebar-content">
<ul class="sidebar"> <ul class="sidebar">
<li class="sidebar-list"> <sidebar-menu-item path="portainer.home" icon-class="fa-home fa-fw" class-name="sidebar-list">Home</sidebar-menu-item>
<a ui-sref="portainer.home" ui-sref-active="active">Home <span class="menu-icon fa fa-home fa-fw"></span></a>
</li>
<li class="sidebar-title endpoint-name" ng-if="applicationState.endpoint.name"> <li class="sidebar-title endpoint-name" ng-if="applicationState.endpoint.name">
<span class="fa fa-plug space-right"></span>{{ applicationState.endpoint.name }} <span class="fa fa-plug space-right"></span>{{ applicationState.endpoint.name }}
<kubectl-shell ng-if="applicationState.endpoint.mode && applicationState.endpoint.mode.provider === 'KUBERNETES'" class="kubectl-shell"></kubectl-shell> <kubectl-shell ng-if="applicationState.endpoint.mode && applicationState.endpoint.mode.provider === 'KUBERNETES'" class="kubectl-shell"></kubectl-shell>
</li> </li>
<kubernetes-sidebar-content <div ng-if="applicationState.endpoint.mode">
ng-if="applicationState.endpoint.mode && applicationState.endpoint.mode.provider === 'KUBERNETES'" <kubernetes-sidebar ng-if="applicationState.endpoint.mode.provider === 'KUBERNETES'" is-sidebar-open="toggle" endpoint-id="endpointId"></kubernetes-sidebar>
admin-access="isAdmin"
endpoint-id="endpointId" <azure-sidebar ng-if="applicationState.endpoint.mode.provider === 'AZURE'" endpoint-id="endpointId"> </azure-sidebar>
current-state="$state.current.name"
> <docker-sidebar
</kubernetes-sidebar-content> ng-if="applicationState.endpoint.mode.provider !== 'AZURE' && applicationState.endpoint.mode.provider !== 'KUBERNETES'"
<azure-sidebar-content ng-if="applicationState.endpoint.mode && applicationState.endpoint.mode.provider === 'AZURE'" endpoint-id="endpointId"> </azure-sidebar-content>
<docker-sidebar-content
ng-if="applicationState.endpoint.mode && applicationState.endpoint.mode.provider !== 'AZURE' && applicationState.endpoint.mode.provider !== 'KUBERNETES'"
current-route-name="$state.current.name" current-route-name="$state.current.name"
toggle="toggle" is-sidebar-open="toggle"
show-stacks="showStacks" show-stacks="showStacks"
endpoint-api-version="applicationState.endpoint.apiVersion" endpoint-api-version="applicationState.endpoint.apiVersion"
swarm-management="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'" swarm-management="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'"
standalone-management="applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE'" standalone-management="applicationState.endpoint.mode.provider === 'DOCKER_STANDALONE'"
admin-access="isAdmin" admin-access="isAdmin || isEndpointAdmin"
offline-mode="endpointState.OfflineMode" offline-mode="endpointState.OfflineMode"
endpoint-id="endpointId" endpoint-id="endpointId"
></docker-sidebar-content> ></docker-sidebar>
<li class="sidebar-title" authorization="IntegrationStoridgeAdmin" ng-if="applicationState.endpoint.mode && applicationState.endpoint.extensions.length > 0"> </div>
<span>Integrations</span>
</li> <sidebar-section title="Integrations" ng-if="applicationState.endpoint.mode && applicationState.endpoint.extensions.length > 0" authorization="IntegrationStoridgeAdmin">
<li <sidebar-menu
authorization="IntegrationStoridgeAdmin"
class="sidebar-list"
ng-if=" ng-if="
applicationState.endpoint.mode && applicationState.endpoint.mode &&
applicationState.endpoint.extensions.indexOf('storidge') !== -1 && applicationState.endpoint.extensions.indexOf('storidge') !== -1 &&
applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' &&
applicationState.endpoint.mode.role === 'MANAGER' applicationState.endpoint.mode.role === 'MANAGER'
" "
icon-class="fa-bolt fa-fw"
label="Storidge"
path="storidge.cluster"
is-sidebar-open="toggle"
children-paths="['storidge.cluster', 'storidge.profiles', 'storidge.monitor', 'storidge.profiles.new', 'storidge.profiles.profile', 'storidge.drives', 'storidge.drives.drive', 'storidge.cluster.node']"
> >
<a ui-sref="storidge.cluster" ui-sref-active="active">Storidge <span class="menu-icon fa fa-bolt fa-fw"></span></a> <sidebar-menu-item path="storidge.monitor" class-name="sidebar-sublist">Monitor</sidebar-menu-item>
<div <sidebar-menu-item path="storidge.profiles" class-name="sidebar-sublist">Profiles</sidebar-menu-item>
class="sidebar-sublist" <sidebar-menu-item path="storidge.drives" class-name="sidebar-sublist">Drives</sidebar-menu-item>
ng-if=" </sidebar-menu>
toggle && </sidebar-section>
($state.current.name === 'storidge.cluster' ||
$state.current.name === 'storidge.profiles' || <sidebar-section title="Edge compute" ng-if="isAdmin && applicationState.application.enableEdgeComputeFeatures">
$state.current.name === 'storidge.monitor' || <sidebar-menu-item path="edge.groups" icon-class="fa-object-group fa-fw" class-name="sidebar-list">Edge Groups</sidebar-menu-item>
$state.current.name === 'storidge.profiles.new' || <sidebar-menu-item path="edge.stacks" icon-class="fa-layer-group fa-fw" class-name="sidebar-list">Edge Stacks</sidebar-menu-item>
$state.current.name === 'storidge.profiles.profile' || <sidebar-menu-item path="edge.jobs" icon-class="fa-clock fa-fw" class-name="sidebar-list">Edge Jobs</sidebar-menu-item>
$state.current.name === 'storidge.drives' || </sidebar-section>
$state.current.name === 'storidge.drives.drive' ||
$state.current.name === 'storidge.cluster.node') <sidebar-section ng-if="isAdmin || isTeamLeader" title="Settings">
" <sidebar-menu
icon-class="fa-users fa-fw"
label="Users"
path="portainer.users"
is-sidebar-open="toggle"
children-paths="['portainer.users.user' ,'portainer.teams' ,'portainer.teams.team' ,'portainer.roles' ,'portainer.roles.role' ,'portainer.roles.new']"
> >
<a ui-sref="storidge.monitor" ui-sref-active="active">Monitor</a> <sidebar-menu-item path="portainer.teams" class-name="sidebar-sublist">Teams</sidebar-menu-item>
</div> <sidebar-menu-item path="portainer.roles" class-name="sidebar-sublist">Roles</sidebar-menu-item>
<div </sidebar-menu>
class="sidebar-sublist"
ng-if=" <div ng-if="isAdmin">
toggle && <sidebar-menu
($state.current.name === 'storidge.cluster' || icon-class="fa-plug fa-fw"
$state.current.name === 'storidge.profiles' || label="Endpoints"
$state.current.name === 'storidge.monitor' || path="portainer.endpoints"
$state.current.name === 'storidge.profiles.new' || is-sidebar-open="toggle"
$state.current.name === 'storidge.profiles.profile' || children-paths="['portainer.endpoints.endpoint', 'portainer.endpoints.new', 'portainer.endpoints.endpoint.access', 'portainer.groups', 'portainer.groups.group', 'portainer.groups.group.access', 'portainer.groups.new', 'portainer.tags']"
$state.current.name === 'storidge.drives' ||
$state.current.name === 'storidge.drives.drive' ||
$state.current.name === 'storidge.cluster.node')
"
> >
<a ui-sref="storidge.profiles" ui-sref-active="active">Profiles</a> <sidebar-menu-item path="portainer.groups" class-name="sidebar-sublist">Groups</sidebar-menu-item>
</div> <sidebar-menu-item path="portainer.tags" class-name="sidebar-sublist">Tags</sidebar-menu-item>
<div </sidebar-menu>
class="sidebar-sublist"
ng-if=" <sidebar-menu-item path="portainer.registries" icon-class="fa-database fa-fw" class-name="sidebar-list">Registries</sidebar-menu-item>
toggle &&
($state.current.name === 'storidge.cluster' || <sidebar-menu label="Settings" icon-class="fa-cogs fa-fw" path="portainer.settings" is-sidebar-open="toggle" children-paths="['portainer.settings.authentication']">
$state.current.name === 'storidge.profiles' || <sidebar-menu-item path="portainer.settings.authentication" class-name="sidebar-sublist">Authentication</sidebar-menu-item>
$state.current.name === 'storidge.monitor' ||
$state.current.name === 'storidge.profiles.new' || <div class="sidebar-sublist">
$state.current.name === 'storidge.profiles.profile' ||
$state.current.name === 'storidge.drives' ||
$state.current.name === 'storidge.drives.drive' ||
$state.current.name === 'storidge.cluster.node')
"
>
<a ui-sref="storidge.drives" ui-sref-active="active">Drives</a>
</div>
</li>
<li class="sidebar-title" ng-if="isAdmin && applicationState.application.enableEdgeComputeFeatures">
<span>Edge Compute</span>
</li>
<li class="sidebar-list" ng-if="isAdmin && applicationState.application.enableEdgeComputeFeatures">
<a ui-sref="edge.groups" ui-sref-active="active">Edge Groups <span class="menu-icon fa fa-object-group fa-fw"></span></a>
</li>
<li class="sidebar-list" ng-if="isAdmin && applicationState.application.enableEdgeComputeFeatures">
<a ui-sref="edge.stacks" ui-sref-active="active">Edge Stacks <span class="menu-icon fa fa-layer-group fa-fw"></span></a>
</li>
<li class="sidebar-list" ng-if="isAdmin && applicationState.application.enableEdgeComputeFeatures">
<a ui-sref="edge.jobs" ui-sref-active="active">Edge Jobs <span class="menu-icon fa fa-clock fa-fw"></span></a>
</li>
<li class="sidebar-title" ng-if="isAdmin || isTeamLeader">
<span>Settings</span>
</li>
<li class="sidebar-list" ng-if="isAdmin || isTeamLeader">
<a ui-sref="portainer.users" ui-sref-active="active">Users <span class="menu-icon fa fa-users fa-fw"></span></a>
<div
class="sidebar-sublist"
ng-if="
toggle &&
($state.current.name === 'portainer.users' ||
$state.current.name === 'portainer.users.user' ||
$state.current.name === 'portainer.teams' ||
$state.current.name === 'portainer.teams.team' ||
$state.current.name === 'portainer.roles')
"
>
<a ui-sref="portainer.teams" ui-sref-active="active">Teams</a>
</div>
<div
class="sidebar-sublist"
ng-if="
toggle &&
($state.current.name === 'portainer.users' ||
$state.current.name === 'portainer.users.user' ||
$state.current.name === 'portainer.teams' ||
$state.current.name === 'portainer.teams.team' ||
$state.current.name === 'portainer.roles')
"
>
<a ui-sref="portainer.roles" ui-sref-active="active">Roles</a>
</div>
</li>
<li class="sidebar-list" ng-if="isAdmin">
<a
ui-sref="portainer.endpoints"
ng-class="{ active: $state.current.name.includes('portainer.endpoints') && $state.current.name !== 'portainer.endpoints.endpoint.kubernetesConfig' }"
>Endpoints <span class="menu-icon fa fa-plug fa-fw"></span
></a>
<div
class="sidebar-sublist"
ng-if="
toggle &&
($state.current.name === 'portainer.endpoints' ||
$state.current.name === 'portainer.endpoints.endpoint' ||
$state.current.name === 'portainer.endpoints.new' ||
$state.current.name === 'portainer.endpoints.endpoint.access' ||
$state.current.name === 'portainer.groups' ||
$state.current.name === 'portainer.groups.group' ||
$state.current.name === 'portainer.groups.group.access' ||
$state.current.name === 'portainer.groups.new' ||
$state.current.name === 'portainer.tags')
"
>
<a ui-sref="portainer.groups" ui-sref-active="active">Groups</a>
</div>
<div
class="sidebar-sublist"
ng-if="
toggle &&
($state.current.name === 'portainer.endpoints' ||
$state.current.name === 'portainer.endpoints.endpoint' ||
$state.current.name === 'portainer.endpoints.new' ||
$state.current.name === 'portainer.endpoints.endpoint.access' ||
$state.current.name === 'portainer.groups' ||
$state.current.name === 'portainer.groups.group' ||
$state.current.name === 'portainer.groups.group.access' ||
$state.current.name === 'portainer.groups.new' ||
$state.current.name === 'portainer.tags')
"
>
<a ui-sref="portainer.tags" ui-sref-active="active">Tags</a>
</div>
</li>
<li class="sidebar-list" ng-if="isAdmin">
<a ui-sref="portainer.registries" ui-sref-active="active">Registries <span class="menu-icon fa fa-database fa-fw"></span></a>
</li>
<li class="sidebar-list" ng-if="isAdmin">
<a ui-sref="portainer.settings" ui-sref-active="active">Settings <span class="menu-icon fa fa-cogs fa-fw"></span></a>
<div class="sidebar-sublist" ng-if="toggle && $state.current.name.startsWith('portainer.settings') && isAdmin">
<a ui-sref="portainer.settings.authentication" ui-sref-active="active">Authentication</a>
</div>
<div class="sidebar-sublist" ng-if="toggle && $state.current.name.startsWith('portainer.settings')">
<a href="http://www.portainer.io/help_about" target="_blank">Help / About</a> <a href="http://www.portainer.io/help_about" target="_blank">Help / About</a>
</div> </div>
</li> </sidebar-menu>
</div>
</sidebar-section>
</ul> </ul>
<div class="sidebar-footer-content"> <div class="sidebar-footer-content">
<div class="update-notification" ng-if="applicationState.application.versionStatus.UpdateAvailable"> <div class="update-notification" ng-if="applicationState.application.versionStatus.UpdateAvailable">

35
app/portainer/views/sidebar/sidebarController.js
View File

@ -1,14 +1,9 @@
angular.module('portainer.app').controller('SidebarController', [ angular.module('portainer.app').controller('SidebarController', SidebarController);
'$rootScope',
'$q', function SidebarController($rootScope, $scope, $transitions, StateManager, Notifications, Authentication, UserService, EndpointProvider) {
'$scope', $scope.applicationState = StateManager.getState();
'$transitions', $scope.endpointState = EndpointProvider.endpoint();
'StateManager',
'Notifications',
'Authentication',
'UserService',
'EndpointProvider',
function ($rootScope, $q, $scope, $transitions, StateManager, Notifications, Authentication, UserService, EndpointProvider) {
function checkPermissions(memberships) { function checkPermissions(memberships) {
var isLeader = false; var isLeader = false;
angular.forEach(memberships, function (membership) { angular.forEach(memberships, function (membership) {
@ -30,17 +25,18 @@ angular.module('portainer.app').controller('SidebarController', [
$scope.endpointId = EndpointProvider.endpointID(); $scope.endpointId = EndpointProvider.endpointID();
$scope.showStacks = shouldShowStacks(); $scope.showStacks = shouldShowStacks();
let userDetails = Authentication.getUserDetails(); const userDetails = Authentication.getUserDetails();
const isAdmin = isClusterAdmin(); const isAdmin = isClusterAdmin();
$scope.isAdmin = isAdmin; $scope.isAdmin = isAdmin;
$q.when(!isAdmin ? UserService.userMemberships(userDetails.ID) : []) if (!isAdmin) {
.then(function success(data) { try {
checkPermissions(data); const memberships = await UserService.userMemberships(userDetails.ID);
}) checkPermissions(memberships);
.catch(function error(err) { } catch (err) {
Notifications.error('Failure', err, 'Unable to retrieve user memberships'); Notifications.error('Failure', err, 'Unable to retrieve user memberships');
}); }
}
} }
initView(); initView();
@ -67,5 +63,4 @@ angular.module('portainer.app').controller('SidebarController', [
document.title = `${$rootScope.defaultTitle} | ${$scope.applicationState.endpoint.name}`; document.title = `${$rootScope.defaultTitle} | ${$scope.applicationState.endpoint.name}`;
} }
}); });
}, }
]);