From 32800a843a9c06d8918b86040faa64fe65c81a41 Mon Sep 17 00:00:00 2001
From: Anthony Lapenna <lapenna.anthony@gmail.com>
Date: Wed, 16 May 2018 08:49:14 +0200
Subject: [PATCH] feat(sidebar): update endpoint selection UX (#1902)

* style(sidebar): update selected endpoint name color

* feat(sidebar): sort groups/endpoints alphabetically
---
 app/portainer/views/sidebar/sidebar.html         | 2 +-
 app/portainer/views/sidebar/sidebarController.js | 4 ++--
 assets/css/app.css                               | 4 ++++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/portainer/views/sidebar/sidebar.html b/app/portainer/views/sidebar/sidebar.html
index ca809fb75..e182e5a01 100644
--- a/app/portainer/views/sidebar/sidebar.html
+++ b/app/portainer/views/sidebar/sidebar.html
@@ -14,7 +14,7 @@
       groups="groups"
       select-endpoint="switchEndpoint"
     ></endpoint-selector>
-    <li class="sidebar-title"><span>{{ activeEndpoint.Name }}</span></li>
+    <li class="sidebar-title"><span class="endpoint-name">{{ activeEndpoint.Name }}</span></li>
     <docker-sidebar-content
       endpoint-api-version="applicationState.endpoint.apiVersion"
       swarm-management="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'"
diff --git a/app/portainer/views/sidebar/sidebarController.js b/app/portainer/views/sidebar/sidebarController.js
index d730415ce..9863e3eb7 100644
--- a/app/portainer/views/sidebar/sidebarController.js
+++ b/app/portainer/views/sidebar/sidebarController.js
@@ -58,8 +58,8 @@ function ($q, $scope, $state, EndpointService, GroupService, StateManager, Endpo
     })
     .then(function success(data) {
       var endpoints = data.endpoints;
-      $scope.groups = data.groups;
-      $scope.endpoints = endpoints;
+      $scope.groups = _.sortBy(data.groups, ['Name']);
+      $scope.endpoints = _.sortBy(endpoints, ['Name']);
 
       setActiveEndpoint(endpoints);
 
diff --git a/assets/css/app.css b/assets/css/app.css
index 16ab7489b..b4f149e68 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -304,6 +304,10 @@ ul.sidebar .sidebar-title {
   height: auto;
 }
 
+ul.sidebar .sidebar-title .endpoint-name {
+  color: #fff;
+}
+
 ul.sidebar .sidebar-list a {
   font-size: 14px;
 }