fix(dashboard): show endpoint tags (#4216)

* fix(dashboard): show endpoint tags

* fix(dashboard): use ctrl

app/docker/views/dashboard/dashboard.html

@@ -57,14 +57,7 @@
             </tr>
             <tr>
               <td>Tags</td>
-              <td>
-                <span ng-if="endpoint.Tags.length === 0">
-                  -
-                </span>
-                <span ng-if="endpoint.Tags.length > 0">
-                  <span ng-repeat="tag in endpoint.Tags"> {{ tag }}{{ $last ? '' : ', ' }} </span>
-                </span>
-              </td>
+              <td>{{ endpointTags }}</td>
             </tr>
             <tr ng-if="applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE' && applicationState.endpoint.mode.role === 'MANAGER'">
               <td colspan="2">

app/docker/views/dashboard/dashboardController.js

@@ -1,3 +1,6 @@
+import angular from 'angular';
+import _ from 'lodash';
+
 angular.module('portainer.docker').controller('DashboardController', [
   '$scope',
   '$q',
@@ -13,6 +16,7 @@ angular.module('portainer.docker').controller('DashboardController', [
   'Notifications',
   'EndpointProvider',
   'StateManager',
+  'TagService',
   function (
     $scope,
     $q,
@@ -27,7 +31,8 @@ angular.module('portainer.docker').controller('DashboardController', [
     EndpointService,
     Notifications,
     EndpointProvider,
-    StateManager
+    StateManager,
+    TagService
   ) {
     $scope.dismissInformationPanel = function (id) {
       StateManager.dismissInformationPanel(id);
@@ -52,6 +57,7 @@ angular.module('portainer.docker').controller('DashboardController', [
         stacks: StackService.stacks(true, endpointMode.provider === 'DOCKER_SWARM_MODE' && endpointMode.role === 'MANAGER', endpointId),
         info: SystemService.info(),
         endpoint: EndpointService.endpoint(endpointId),
+        tags: TagService.tags(),
       })
         .then(function success(data) {
           $scope.containers = data.containers;
@@ -62,6 +68,18 @@ angular.module('portainer.docker').controller('DashboardController', [
           $scope.stackCount = data.stacks.length;
           $scope.info = data.info;
           $scope.endpoint = data.endpoint;
+          $scope.endpointTags = $scope.endpoint.TagIds.length
+            ? _.join(
+                _.filter(
+                  _.map($scope.endpoint.TagIds, (id) => {
+                    const tag = data.tags.find((tag) => tag.Id === id);
+                    return tag ? tag.Name : '';
+                  }),
+                  Boolean
+                ),
+                ', '
+              )
+            : '-';
           $scope.offlineMode = EndpointProvider.offlineMode();
         })
         .catch(function error(err) {

app/kubernetes/views/dashboard/dashboard.html

@@ -24,14 +24,7 @@
               </tr>
               <tr>
                 <td>Tags</td>
-                <td>
-                  <span ng-if="ctrl.endpoint.Tags.length === 0">
-                    -
-                  </span>
-                  <span ng-if="ctrl.endpoint.Tags.length > 0">
-                    <span ng-repeat="tag in ctrl.endpoint.Tags"> {{ tag }}{{ $last ? '' : ', ' }} </span>
-                  </span>
-                </td>
+                <td>{{ ctrl.endpointTags }}</td>
               </tr>
             </tbody>
           </table>

app/kubernetes/views/dashboard/dashboardController.js

@@ -14,7 +14,8 @@ class KubernetesDashboardController {
     KubernetesConfigurationService,
     KubernetesVolumeService,
     KubernetesNamespaceHelper,
-    Authentication
+    Authentication,
+    TagService
   ) {
     this.$async = $async;
     this.Notifications = Notifications;
@@ -26,6 +27,7 @@ class KubernetesDashboardController {
     this.KubernetesVolumeService = KubernetesVolumeService;
     this.KubernetesNamespaceHelper = KubernetesNamespaceHelper;
     this.Authentication = Authentication;
+    this.TagService = TagService;
 
     this.onInit = this.onInit.bind(this);
     this.getAll = this.getAll.bind(this);
@@ -37,17 +39,31 @@ class KubernetesDashboardController {
 
     try {
       const endpointId = this.EndpointProvider.endpointID();
-      const [endpoint, pools, applications, configurations, volumes] = await Promise.all([
+      const [endpoint, pools, applications, configurations, volumes, tags] = await Promise.all([
         this.EndpointService.endpoint(endpointId),
         this.KubernetesResourcePoolService.get(),
         this.KubernetesApplicationService.get(),
         this.KubernetesConfigurationService.get(),
         this.KubernetesVolumeService.get(),
+        this.TagService.tags(),
       ]);
       this.endpoint = endpoint;
       this.applications = applications;
       this.volumes = volumes;
 
+      this.endpointTags = this.endpoint.TagIds.length
+        ? _.join(
+            _.filter(
+              _.map(this.endpoint.TagIds, (id) => {
+                const tag = tags.find((tag) => tag.Id === id);
+                return tag ? tag.Name : '';
+              }),
+              Boolean
+            ),
+            ', '
+          )
+        : '-';
+
       if (!isAdmin) {
         this.pools = _.filter(pools, (pool) => {
           return !this.KubernetesNamespaceHelper.isSystemNamespace(pool.Namespace.Name);