From 88a8c9c2524bbc3279c0e08a5b0d8c5ddd064444 Mon Sep 17 00:00:00 2001
From: Sachin Ramesh <sachin.ramesh@ovhcloud.com>
Date: Wed, 8 Jan 2025 21:08:39 +0530
Subject: [PATCH] feat(dedicated): add tags column and pop up

ref: MANAGER-15572

Signed-off-by: Sachin Ramesh <sachin.ramesh@ovhcloud.com>
---
 .../clusters/nodes/nodes.component.js         |  2 +
 .../clusters/nodes/nodes.controller.js        | 37 ++++++++++++++
 .../clusters/nodes/nodes.html                 | 20 ++++++++
 .../dedicated-server.component.js             |  1 +
 .../dedicated-server.routing.js               | 13 +++++
 .../display-tags/display-tags.constants.js    |  7 +++
 .../display-tags/display-tags.controller.js   | 31 +++++++++++
 .../dedicated-server/display-tags/index.js    | 18 +++++++
 .../display-tags/template.html                | 21 ++++++++
 .../translations/Messages_fr_FR.json          |  6 +++
 .../dedicated-server/servers/index.js         |  4 +-
 .../servers/servers.controller.js             | 51 ++++++++++++++++++-
 .../dedicated-server/servers/servers.html     | 19 +++++++
 .../servers/translations/Messages_fr_FR.json  |  1 +
 14 files changed, 228 insertions(+), 3 deletions(-)
 create mode 100644 packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/nodes.controller.js
 create mode 100644 packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/display-tags.constants.js
 create mode 100644 packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/display-tags.controller.js
 create mode 100644 packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/index.js
 create mode 100644 packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/template.html
 create mode 100644 packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/translations/Messages_fr_FR.json

diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/nodes.component.js b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/nodes.component.js
index 1e1136c62cfa..287640e92c94 100644
--- a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/nodes.component.js
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/nodes.component.js
@@ -1,4 +1,5 @@
 import template from './nodes.html';
+import controller from './nodes.controller.js';
 
 export default {
   bindings: {
@@ -6,4 +7,5 @@ export default {
     getNodeDashboardLink: '<',
   },
   template,
+  controller,
 };
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/nodes.controller.js b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/nodes.controller.js
new file mode 100644
index 000000000000..e1043c2b63b8
--- /dev/null
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/nodes.controller.js
@@ -0,0 +1,37 @@
+import {
+  CONTROLLER_NAME as DISPLAY_TAG_POPUP_CONTROLLER,
+  TEMPLATE_CACHE_KEY as DISPLAY_TAG_POPUP_TEMPLATE,
+} from '../../display-tags/display-tags.constants';
+
+export default class ServersCtrl {
+  /* @ngInject */
+  constructor($uibModal) {
+    this.$uibModal = $uibModal;
+  }
+
+  getTags(tags) {
+    if (tags) {
+      this.tags = Object.keys(tags)
+        .filter((key) => !key.startsWith('ovh:'))
+        .map((key) => `${key}:${tags[key]}`);
+    }
+    return this.tags;
+  }
+
+  goToTagsModal(iamDetails) {
+    this.server_name = iamDetails.displayName;
+    this.server_tags = this.getTags(iamDetails.tags);
+    this.$uibModal.open({
+      templateUrl: DISPLAY_TAG_POPUP_TEMPLATE,
+      controller: DISPLAY_TAG_POPUP_CONTROLLER,
+      controllerAs: '$ctrl',
+      resolve: {
+        hasDefaultMeansOfPayment: () => this.hasDefaultMeansOfPayment,
+        itemName: () => this.servicePackToOrder?.displayName,
+        itemRef: () => this.servicePackToOrder?.name,
+        serverName: () => this.server_name,
+        serverTags: () => this.server_tags,
+      },
+    });
+  }
+}
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/nodes.html b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/nodes.html
index 50de24b58e4a..758967bfbc1b 100644
--- a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/nodes.html
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/clusters/nodes/nodes.html
@@ -25,6 +25,10 @@
                 class="oui-table__header"
                 data-translate="dedicated_servers_status"
             ></th>
+            <th
+                class="oui-table__header"
+                data-translate="dedicated_servers_tags"
+            ></th>
         </tr>
     </thead>
     <tbody>
@@ -58,6 +62,22 @@
                     data-translate="{{:: 'dedicated_servers_state_' + node.state }}"
                 ></span>
             </td>
+            <td class="oui-table__cell">
+                <span
+                    data-ng-repeat="tag in $ctrl.getTags(node.iam.tags)  | limitTo: 2"
+                >
+                    <span class="oui-badge oui-badge_info" data-ng-bind="tag">
+                    </span>
+                </span>
+                <button
+                    type="button"
+                    class="oui-link"
+                    data-ng-if="$ctrl.getTags(node.iam.tags).length > 1"
+                    data-ng-click="$ctrl.goToTagsModal(node.iam)"
+                >
+                    ...
+                </button>
+            </td>
         </tr>
     </tbody>
 </table>
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/dedicated-server.component.js b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/dedicated-server.component.js
index 61720a1f8393..cea2124a7c84 100644
--- a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/dedicated-server.component.js
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/dedicated-server.component.js
@@ -7,6 +7,7 @@ export default {
     currentActiveLink: '<',
     clustersLink: '<',
     allServersLink: '<',
+    editDetails: '<',
   },
   template,
 };
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/dedicated-server.routing.js b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/dedicated-server.routing.js
index 867c175a423f..2c0bf0d9038c 100644
--- a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/dedicated-server.routing.js
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/dedicated-server.routing.js
@@ -29,6 +29,19 @@ export default /* @ngInject */ ($stateProvider) => {
                 isMultiAZFeatureAvailable && clusters.data.length !== 0,
             );
         },
+        editDetails: /* @ngInject */ ($uibModal) => (data) => {
+          return $uibModal.open({
+            animation: true,
+            templateUrl: './components/name-edition/name-edition.html',
+            controller: 'NameEditionCtrl',
+            controllerAs: '$ctrl',
+            resolve: {
+              data: () => ({
+                ...data,
+              }),
+            },
+          });
+        },
         currentActiveLink: /* @ngInject */ ($transition$, $state) => () =>
           $state.href($state.current.name, $transition$.params()),
         allServersLink: /* @ngInject */ ($transition$, $state) =>
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/display-tags.constants.js b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/display-tags.constants.js
new file mode 100644
index 000000000000..4e63a6c26658
--- /dev/null
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/display-tags.constants.js
@@ -0,0 +1,7 @@
+export const CONTROLLER_NAME = 'ovhManagerDedicatedServerDisplayTags';
+export const TEMPLATE_CACHE_KEY = 'ovhManagerDedicatedServerDisplayTags.html';
+
+export default {
+  CONTROLLER_NAME,
+  TEMPLATE_CACHE_KEY,
+};
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/display-tags.controller.js b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/display-tags.controller.js
new file mode 100644
index 000000000000..aef1f2cda901
--- /dev/null
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/display-tags.controller.js
@@ -0,0 +1,31 @@
+export default class {
+  /* @ngInject */
+  constructor($uibModalInstance, serverName, serverTags) {
+    this.$uibModalInstance = $uibModalInstance;
+    this.serverName = serverName;
+    this.serverTags = serverTags;
+  }
+
+  $onInit() {
+    this.serverTagList = this.serverTags;
+  }
+
+  onEditTags() {
+    this.$uibModalInstance.close();
+    this.$state.go('app.dedicated-server.server.tags');
+  }
+
+  onSearchServerTags(value) {
+    this.serverTagList = this.serverTags.filter((tag) =>
+      tag.toLowerCase().includes(value.toLowerCase()),
+    );
+  }
+
+  onSearchReset() {
+    this.serverTagList = [...this.serverTags];
+  }
+
+  back() {
+    this.$uibModalInstance.dismiss();
+  }
+}
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/index.js b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/index.js
new file mode 100644
index 000000000000..9683930d5111
--- /dev/null
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/index.js
@@ -0,0 +1,18 @@
+import controller from './display-tags.controller';
+import template from './template.html';
+
+import { CONTROLLER_NAME, TEMPLATE_CACHE_KEY } from './display-tags.constants';
+
+const moduleName = 'ovhManagerDedicatedServerDisplayTags';
+
+angular
+  .module(moduleName, [])
+  .controller(CONTROLLER_NAME, controller)
+  .run(/* @ngTranslationsInject:json ./translations */)
+  .run(
+    /* @ngInject */ ($templateCache) => {
+      $templateCache.put(TEMPLATE_CACHE_KEY, template);
+    },
+  );
+
+export default moduleName;
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/template.html b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/template.html
new file mode 100644
index 000000000000..9885638bc51f
--- /dev/null
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/template.html
@@ -0,0 +1,21 @@
+<oui-modal
+    data-on-dismiss="$ctrl.$uibModalInstance.dismiss()"
+    data-primary-action="$ctrl.onEditTags()"
+    data-primary-label="{{:: 'display_tags_popup_edit' | translate }}"
+    data-secondary-action="$ctrl.back()"
+    data-secondary-label="{{:: 'display_tags_popup_back' | translate }}"
+    data-heading="{{:: 'display_tags_popup_title' | translate:{ 'serverName': $ctrl.serverName } }}"
+>
+    <div class="mb-4">
+        <oui-search
+            model="$ctrl.searchTag"
+            on-change="$ctrl.onSearchServerTags(modelValue)"
+            on-reset="$ctrl.onSearchReset()"
+            placeholder="{{ ::'display_tags_popup_search'| translate}}"
+        >
+        </oui-search>
+    </div>
+    <span data-ng-repeat="tag in $ctrl.serverTagList">
+        <span class="oui-badge oui-badge_info" data-ng-bind="tag"> </span>
+    </span>
+</oui-modal>
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/translations/Messages_fr_FR.json b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/translations/Messages_fr_FR.json
new file mode 100644
index 000000000000..90217b15636c
--- /dev/null
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/display-tags/translations/Messages_fr_FR.json
@@ -0,0 +1,6 @@
+{
+  "display_tags_popup_edit": "Modifier les balises",
+  "display_tags_popup_back": "Retour",
+  "display_tags_popup_search": "Rechercher",
+  "display_tags_popup_title": "Tags:"
+}
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/index.js b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/index.js
index a2b3642443b5..2fc88a806cb2 100644
--- a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/index.js
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/index.js
@@ -1,5 +1,5 @@
 import angular from 'angular';
-
+import displayTags from '../display-tags/index.js';
 import '@ovh-ux/ng-translate-async-loader';
 import '@uirouter/angularjs';
 import 'oclazyload';
@@ -9,7 +9,7 @@ import onboarding from './onboarding';
 const moduleName = 'ovhManagerDedicatedServerServersLazyLoading';
 
 angular
-  .module(moduleName, ['ui.router', 'oc.lazyLoad', onboarding])
+  .module(moduleName, ['ui.router', 'oc.lazyLoad', onboarding, displayTags])
   .config(
     /* @ngInject */ ($stateProvider) => {
       $stateProvider
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/servers.controller.js b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/servers.controller.js
index fc674d874981..6d6c9490dbdd 100644
--- a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/servers.controller.js
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/servers.controller.js
@@ -4,12 +4,18 @@ import set from 'lodash/set';
 import snakeCase from 'lodash/snakeCase';
 
 import { DC_2_ISO, MONITORING_STATUSES } from './servers.constants';
+import {
+  CONTROLLER_NAME as DISPLAY_TAG_POPUP_CONTROLLER,
+  TEMPLATE_CACHE_KEY as DISPLAY_TAG_POPUP_TEMPLATE,
+} from '../display-tags/display-tags.constants';
 
 export default class ServersCtrl {
   /* @ngInject */
-  constructor($q, $translate, ouiDatagridService) {
+  constructor($q, $state, $translate, $uibModal, ouiDatagridService) {
     this.$q = $q;
+    this.$state = $state;
     this.$translate = $translate;
+    this.$uibModal = $uibModal;
     this.ouiDatagridService = ouiDatagridService;
   }
   // comment to use staging
@@ -40,6 +46,10 @@ export default class ServersCtrl {
       this.dedicatedServers.data,
       'commercialRange',
     );
+
+    this.tagEnumFilter = this.getTagEnumFilterFromCustomerData(
+      this.dedicatedServers.data,
+    );
   }
 
   static toUpperSnakeCase(str) {
@@ -91,6 +101,19 @@ export default class ServersCtrl {
     );
   }
 
+  getTagEnumFilterFromCustomerData(data, prefix = null) {
+    return this.getEnumFilter(
+      data
+        .filter((server) => server.iam?.tags)
+        .map((server) => Object.keys(server.iam?.tags))
+        .filter((value, index, self) => {
+          return self.indexOf(value) === index;
+        }),
+      prefix,
+      false,
+    );
+  }
+
   getEnumFilter(list, translationPrefix, toUpperSnakeCaseFlag = true) {
     if (translationPrefix === null) {
       return {
@@ -124,6 +147,32 @@ export default class ServersCtrl {
     };
   }
 
+  getTags(tags) {
+    if (tags) {
+      this.tags = Object.keys(tags)
+        .filter((key) => !key.startsWith('ovh:'))
+        .map((key) => `${key}:${tags[key]}`);
+    }
+    return this.tags;
+  }
+
+  goToTagsModal(iamDetails) {
+    this.server_name = iamDetails.displayName;
+    this.server_tags = this.getTags(iamDetails.tags);
+    this.$uibModal.open({
+      templateUrl: DISPLAY_TAG_POPUP_TEMPLATE,
+      controller: DISPLAY_TAG_POPUP_CONTROLLER,
+      controllerAs: '$ctrl',
+      resolve: {
+        hasDefaultMeansOfPayment: () => this.hasDefaultMeansOfPayment,
+        itemName: () => this.servicePackToOrder?.displayName,
+        itemRef: () => this.servicePackToOrder?.name,
+        serverName: () => this.server_name,
+        serverTags: () => this.server_tags,
+      },
+    });
+  }
+
   loadServers() {
     const currentOffset = this.paginationNumber * this.paginationSize;
     set(
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/servers.html b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/servers.html
index 1836be606cf2..75801a03f25d 100644
--- a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/servers.html
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/servers.html
@@ -97,6 +97,25 @@
                 data-translate="{{:: 'server_configuration_state_' + $ctrl.constructor.toUpperSnakeCase($value) }}"
             ></span>
         </oui-datagrid-column>
+        <oui-datagrid-column
+            data-title=":: 'dedicated_servers_tags' | translate"
+            data-property="iam.tags"
+        >
+            <span
+                class="oui-badge oui-badge_info"
+                data-ng-repeat="tag in $ctrl.getTags($row.iam.tags)  | limitTo: 2"
+                data-ng-bind="tag"
+            >
+            </span>
+            <button
+                type="button"
+                class="oui-link"
+                data-ng-if="$ctrl.getTags($row.iam.tags).length > 1"
+                data-ng-click="$ctrl.goToTagsModal($row.iam)"
+            >
+                ...
+            </button>
+        </oui-datagrid-column>
         <oui-datagrid-column
             data-title=":: 'dedicated_servers_monitoring' | translate"
             data-property="monitoringStatus"
diff --git a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/translations/Messages_fr_FR.json b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/translations/Messages_fr_FR.json
index 56ca1183f95a..f6306e78d04e 100644
--- a/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/translations/Messages_fr_FR.json
+++ b/packages/manager/apps/dedicated/client/app/dedicated/dedicated-server/servers/translations/Messages_fr_FR.json
@@ -12,6 +12,7 @@
   "dedicated_servers_datacenter": "Datacenter",
   "dedicated_servers_country": "Pays",
   "dedicated_servers_region": "Région",
+  "dedicated_servers_tags": "Tags",
   "dedicated_servers_monitoring": "État Monitoring",
   "dedicated_servers_popover_details": "Détails",
   "dedicated_servers_button_server_order": "Commander un serveur dédié",