From b7c48fcbed0fc174e313ccc4cf60ff2a2eb0337c Mon Sep 17 00:00:00 2001
From: Brian Kabiro <brian.kabiro@andela.com>
Date: Thu, 4 Oct 2018 01:57:07 +0300
Subject: [PATCH] feat(visualizer): sort tasks in alphabetical order on refresh
 (#2329)

- sort the tasks on each node in alphabetical order to make it easier to track what has changed
---
 app/docker/views/swarm/visualizer/swarmvisualizer.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/docker/views/swarm/visualizer/swarmvisualizer.html b/app/docker/views/swarm/visualizer/swarmvisualizer.html
index 4f9e7f358..70716f2e6 100644
--- a/app/docker/views/swarm/visualizer/swarmvisualizer.html
+++ b/app/docker/views/swarm/visualizer/swarmvisualizer.html
@@ -97,7 +97,7 @@
               <div><span class="label label-{{ node.Status | nodestatusbadge }}">{{ node.Status }}</span></div>
             </div>
             <div class="tasks">
-              <div class="task task_{{ task.Status.State | visualizerTask }}" style="border: 2px solid {{ task.ServiceId | visualizerTaskBorderColor }}" ng-repeat="task in node.Tasks | filter: (state.DisplayOnlyRunningTasks || '') && { Status: { State: 'running' } }">
+              <div class="task task_{{ task.Status.State | visualizerTask }}" style="border: 2px solid {{ task.ServiceId | visualizerTaskBorderColor }}" ng-repeat="task in node.Tasks | orderBy: 'ServiceName' | filter: (state.DisplayOnlyRunningTasks || '') && { Status: { State: 'running' } }">
                 <div class="service_name">{{ task.ServiceName }}</div>
                 <div>Image: {{ task.Spec.ContainerSpec.Image | hideshasum }}</div>
                 <div>Status: {{ task.Status.State }}</div>