feat(dedicated.vmware): custom nsx edges sizing

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/datacenter/dashboard/dedicatedCloud-datacenter-dashboard.component.js

@@ -20,6 +20,7 @@ export default {
     productId: '<',
     serviceName: '<',
     setMessage: '<',
+    goToResizeNsxEdge: '<',
   },
   controller,
   template,

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/datacenter/dashboard/dedicatedCloud-datacenter-dashboard.controller.js

@@ -1,5 +1,4 @@
 import get from 'lodash/get';
-import capitalize from 'lodash/capitalize';
 import last from 'lodash/last';
 
 import {
@@ -23,22 +22,54 @@ export default class {
 
   $onInit() {
     this.loading = true;
+    this.pollNsxTaskId = null;
     this.$q
-      .all([this.getNsxDetails(), this.checkForZertoOptionOrder()])
+      .all([
+        this.getNsxDetails(),
+        this.getNsxEdgePendingTask(),
+        this.checkForZertoOptionOrder(),
+      ])
       .finally(() => {
         this.loading = false;
       });
   }
 
+  $onDestroy() {
+    if (this.pollNsxTaskId) {
+      this.DedicatedCloud.stopResizeNsxTaskPoller(this.pollNsxTaskId);
+    }
+  }
+
+  pollNsxTask(taskId) {
+    this.pollNsxTaskId = taskId;
+    this.DedicatedCloud.datacenterResizeNsxTaskPoller(this.serviceName, taskId)
+      .then(() => {
+        this.getNsxDetails();
+      })
+      .finally(() => {
+        this.pollNsxTaskId = null;
+      });
+  }
+
+  getNsxEdgePendingTask() {
+    return this.DedicatedCloud.getDatacenterPendingResizeNsxTask(
+      this.serviceName,
+      this.datacenter.model.id,
+    ).then((data) => {
+      if (data?.length > 0) {
+        this.pollNsxTask(data[0].taskId);
+      }
+    });
+  }
+
   getNsxDetails() {
     return this.DedicatedCloud.getDatacenterInfoNsxt(
       this.serviceName,
       this.datacenter.model.id,
-    ).then(({ data }) => {
+    ).then((data) => {
       this.datacenter.model.edgesCount = data.length;
-      this.datacenter.model.edgesLevel = data[0]?.size
-        ? capitalize(data[0].size)
-        : '';
+      this.datacenter.model.edgesLevel = data[0] ? data[0].size : '';
+      this.datacenter.model.edgesStatus = data[0] ? data[0].state : '';
     });
   }
 

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/datacenter/dashboard/dedicatedCloud-datacenter-dashboard.html

@@ -186,13 +186,58 @@
             <oui-tile
                 data-heading="{{:: 'dedicatedCloud_nsx_edge_title' | translate }}"
                 data-loading="$ctrl.loading"
+                data-ng-if="$ctrl.datacenter.model.isNsxCommercialRangeName"
             >
                 <oui-tile-definition
                     data-term="{{:: 'dedicatedCloud_nsx_edge_level' | translate }}"
-                    data-description="{{:: $ctrl.datacenter.model.edgesLevel }}"
+                    data-ng-if="!$ctrl.pollNsxTaskId"
                 >
+                    <oui-tile-description>
+                        <span
+                            data-ng-bind=":: $ctrl.datacenter.model.edgesLevel"
+                        ></span>
+                        <span
+                            class="oui-badge"
+                            data-ng-if="$ctrl.datacenter.model.edgesStatus"
+                            data-ng-class="{
+                                'oui-badge_error': ($ctrl.datacenter.model.edgesStatus === 'error'),
+                                'oui-badge_warning': ($ctrl.datacenter.model.edgesStatus === 'disabling'||'migrating'||'provisionning'||'recycling'||'upgrading'),
+                                'oui-badge_success': ($ctrl.datacenter.model.edgesStatus === 'available'||'delivered')
+                            }"
+                        >
+                            <span
+                                data-ng-bind=":: $ctrl.datacenter.model.edgesStatus"
+                            ></span>
+                        </span>
+                    </oui-tile-description>
+                    <oui-action-menu
+                        aria-label="{{:: 'dedicatedCloud_datacenter_resize' | translate}}"
+                        data-compact
+                        data-placement="end"
+                    >
+                        <oui-action-menu-item
+                            aria-label="{{:: 'dedicatedCloud_datacenter_resize' | translate }}"
+                            data-ng-click="$ctrl.goToResizeNsxEdge($ctrl.datacenter.model.id)"
+                        >
+                            <span
+                                data-translate="dedicatedCloud_datacenter_resize"
+                            ></span>
+                        </oui-action-menu-item>
+                    </oui-action-menu>
                 </oui-tile-definition>
 
+                <oui-tile-definition
+                    data-term="{{:: 'dedicatedCloud_nsx_edge_level' | translate }}"
+                    data-ng-if="$ctrl.pollNsxTaskId"
+                >
+                    <oui-tile-description>
+                        <span class="oui-badge oui-badge_warning">
+                            <span
+                                data-translate="dedicatedCloud_nsx_task_progress"
+                            ></span>
+                        </span>
+                    </oui-tile-description>
+                </oui-tile-definition>
                 <oui-tile-definition
                     data-term="{{:: 'dedicatedCloud_nsx_edge_quantity' | translate }}"
                     data-description="{{:: $ctrl.datacenter.model.edgesCount }}"

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/datacenter/dashboard/manage-nsx-edges/dedicatedCloud-datacenter-manage-nsx.component.js

@@ -0,0 +1,20 @@
+import controller from './dedicatedCloud-datacenter-manage-nsx.controller';
+import template from './dedicatedCloud-datacenter-manage-nsx.html';
+
+export default {
+  bindings: {
+    goBack: '<',
+    serviceName: '<',
+    datacenterId: '<',
+    setMessage: '<',
+    nsxEdgeCurrentLevel: '<',
+    nsxtEdgesScalingCapabilities: '<',
+    datastoreOrderLink: '<',
+    hostOrderLink: '<',
+    trackClick: '<',
+    trackPage: '<',
+    trackingPrefix: '<',
+  },
+  controller,
+  template,
+};

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/datacenter/dashboard/manage-nsx-edges/dedicatedCloud-datacenter-manage-nsx.constants.js

@@ -0,0 +1,30 @@
+export const TRACKING_SUFFIX = {
+  ADD_HOST: '::add-host',
+  ORDER_HOST: '::add-storage',
+  CONFIRM: '::confirm',
+  CONFIRM_SUCCESS: '::nsx-success',
+  CONFIRM_ERROR: '::nsx-error',
+};
+
+export const NSX_RESOURCES = {
+  MEDIUM: {
+    cpu: 4,
+    storage: 200,
+    ram: 8,
+  },
+  LARGE: {
+    cpu: 8,
+    storage: 200,
+    ram: 32,
+  },
+  XLARGE: {
+    cpu: 16,
+    storage: 200,
+    ram: 32,
+  },
+};
+
+export default {
+  TRACKING_SUFFIX,
+  NSX_RESOURCES,
+};

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/datacenter/dashboard/manage-nsx-edges/dedicatedCloud-datacenter-manage-nsx.controller.js

@@ -0,0 +1,57 @@
+import {
+  NSX_RESOURCES,
+  TRACKING_SUFFIX,
+} from './dedicatedCloud-datacenter-manage-nsx.constants';
+import { EDGES_SIZES } from '../../../datacenters/datacenter.constants';
+
+export default class {
+  /* @ngInject */
+  constructor(DedicatedCloud, $translate, coreURLBuilder) {
+    this.DedicatedCloud = DedicatedCloud;
+    this.$translate = $translate;
+    this.coreURLBuilder = coreURLBuilder;
+    this.NSX_RESOURCES = NSX_RESOURCES;
+    this.TRACKING_SUFFIX = TRACKING_SUFFIX;
+  }
+
+  $onInit() {
+    this.loading = false;
+    this.nsxSizes = Object.keys(EDGES_SIZES);
+    this.selectedNsxLevel = null;
+    this.hasScalingCapabilities =
+      this.nsxtEdgesScalingCapabilities.length ===
+      Object.keys(EDGES_SIZES).length;
+  }
+
+  isSizeAvailable(size) {
+    return this.nsxtEdgesScalingCapabilities.indexOf(size) > -1;
+  }
+
+  changeNsxSize() {
+    this.trackClick(this.TRACKING_SUFFIX.CONFIRM);
+    this.loading = true;
+    this.DedicatedCloud.resizeNsxtEdgeCluster(
+      this.serviceName,
+      this.datacenterId,
+      this.selectedNsxLevel,
+    )
+      .then(() => {
+        this.trackPage(this.TRACKING_SUFFIX.CONFIRM_SUCCESS);
+        this.goBack(
+          this.$translate.instant('dedicatedCloud_manage_nsx_edge_success'),
+        );
+      })
+      .catch(() => {
+        this.setMessage(
+          `${this.$translate.instant(
+            'dedicatedCloud_datacenter_nsx_resize_error',
+          )}`,
+          'danger',
+        );
+        this.trackPage(this.TRACKING_SUFFIX.CONFIRM_ERROR);
+      })
+      .finally(() => {
+        this.loading = false;
+      });
+  }
+}

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/datacenter/dashboard/manage-nsx-edges/dedicatedCloud-datacenter-manage-nsx.html

@@ -0,0 +1,104 @@
+<oui-header
+    heading="{{'dedicatedCloud_manage_nsx_edge_title' | translate}}"
+    description="{{ 'dedicatedCloud_tab_datacenter_global_information' | translate}}"
+>
+    <oui-back-button data-on-click="$ctrl.goBack()"> </oui-back-button>
+</oui-header>
+
+<oui-message
+    data-ng-if="!$ctrl.hasScalingCapabilities"
+    class="d-block mb-4"
+    data-type="info"
+>
+    <span data-translate="dedicatedCloud_manage_nsx_missing_ressources"></span>
+
+    <a
+        class="oui-link oui-link_icon"
+        data-ng-href="{{:: $ctrl.datastoreOrderLink }}"
+        data-track-on="click"
+        data-track-type="action"
+        data-track-name="{{:: $ctrl.trackingPrefix + $ctrl.TRACKING_SUFFIX.ORDER_HOST}}"
+        target="_blank"
+        rel="noopener"
+    >
+        <span data-translate="dedicatedCloud_nsx_link_datastore_order"></span>
+        <span class="oui-icon oui-icon-external-link" aria-hidden="true"></span>
+    </a>
+
+    <a
+        class="oui-link oui-link_icon"
+        data-ng-href="{{:: $ctrl.hostOrderLink }}"
+        data-track-on="click"
+        data-track-type="action"
+        data-track-name="{{:: $ctrl.trackingPrefix + $ctrl.TRACKING_SUFFIX.ADD_HOST}}"
+        target="_blank"
+        rel="noopener"
+    >
+        <span data-translate="dedicatedCloud_nsx_link_hosts_order"></span>
+        <span class="oui-icon oui-icon-external-link" aria-hidden="true"></span>
+    </a>
+</oui-message>
+
+<div class="text-center" data-ng-if="$ctrl.loading">
+    <oui-spinner></oui-spinner>
+</div>
+
+<div class="row d-md-flex mt-3">
+    <div
+        class="col-lg-4"
+        data-ng-repeat="size in $ctrl.nsxSizes track by $index"
+    >
+        <oui-select-picker
+            class="h-100"
+            data-name="size"
+            data-model="$ctrl.selectedNsxLevel"
+            data-label="{{:: ('dedicatedCloud_manage_nsx_choice_title_' + size) | translate }}"
+            data-values="[size]"
+            data-variant="light"
+            data-disabled="!$ctrl.isSizeAvailable(size) || size == $ctrl.nsxEdgeCurrentLevel"
+        >
+            <oui-select-picker-section>
+                <div class="text-center">
+                    <span
+                        data-ng-if="$ctrl.nsxEdgeCurrentLevel === size"
+                        data-translate="dedicatedCloud_nsx_edge_current_level"
+                        class="oui-badge oui-badge_info"
+                    ></span>
+                    <br />
+                    <span
+                        data-translate="{{'dedicatedCloud_manage_nsx_choice_description_' + size}}"
+                    ></span>
+                </div>
+            </oui-select-picker-section>
+            <oui-select-picker-footer>
+                <div class="text-center">
+                    <strong
+                        data-translate="{{'dedicatedCloud_manage_nsx_edge_require_per_node_' + size}}"
+                    ></strong>
+                    <br />
+                    <span
+                        data-translate="dedicatedCloud_manage_nsx_choice_footer"
+                        data-translate-values="{ cpu: $ctrl.NSX_RESOURCES[size].cpu, ram: $ctrl.NSX_RESOURCES[size].ram, storage: $ctrl.NSX_RESOURCES[size].storage }"
+                    ></span>
+                </div>
+            </oui-select-picker-footer>
+        </oui-select-picker>
+    </div>
+</div>
+
+<div class="mt-4">
+    <oui-button
+        data-variant="secondary"
+        data-ng-click="$ctrl.goBack()"
+        data-disabled="$ctrl.loading"
+    >
+        <span data-translate="common_cancel"></span>
+    </oui-button>
+    <oui-button
+        data-variant="primary"
+        data-ng-click="$ctrl.changeNsxSize()"
+        data-disabled="!$ctrl.selectedNsxLevel || $ctrl.loading"
+    >
+        <span data-translate="common_confirm"></span>
+    </oui-button>
+</div>

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/datacenter/dashboard/manage-nsx-edges/index.js

@@ -0,0 +1,20 @@
+import angular from 'angular';
+
+import 'angular-translate';
+import '@ovh-ux/ui-kit';
+import '@ovh-ux/ng-translate-async-loader';
+
+import component from './dedicatedCloud-datacenter-manage-nsx.component';
+
+const moduleName = 'ovhManagerDedicatedCloudDatacenterManageNsxEdgeComponent';
+
+angular
+  .module(moduleName, [
+    'ngTranslateAsyncLoader',
+    'oui',
+    'pascalprecht.translate',
+  ])
+  .component('ovhManagerDedicatedCloudDatacenterManageNsxEdges', component)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/datacenter/dashboard/translations/Messages_fr_FR.json

@@ -4,6 +4,26 @@
   "dedicatedCloud_nsx_edge_title": "NSX Edges",
   "dedicatedCloud_nsx_edge_level": "Taille Edge NSX",
   "dedicatedCloud_nsx_edge_quantity": "Nombre de Edge NSX",
+  "dedicatedCloud_nsx_edge_current_level": "Niveau actuel",
+  "dedicatedCloud_nsx_link_datastore_order": "Ajouter du stockage",
+  "dedicatedCloud_nsx_link_hosts_order": "Ajouter des hosts",
+  "dedicatedCloud_manage_nsx_edge_title": "Modifier les noeuds NSX Edge",
+  "dedicatedCloud_manage_nsx_edge_require_per_node_MEDIUM": "Medium - Taille du dispositif par nœud",
+  "dedicatedCloud_manage_nsx_edge_require_per_node_LARGE": "Large - Taille du dispositif par nœud",
+  "dedicatedCloud_manage_nsx_edge_require_per_node_XLARGE": "Extra-large - Taille du dispositif par nœud",
+  "dedicatedCloud_manage_nsx_edge_current_level": "Niveau actuel de NSX Edge",
+  "dedicatedCloud_manage_nsx_edge_success": "Votre niveau de NSX Edge a bien été modifié",
+  "dedicatedCloud_manage_nsx_missing_ressources": "Si une option est grisée, cela signifie que vous ne disposez pas des ressources nécessaires au sein de votre DataCentre Virtuel. Vous devez avoir les ressources CPU, mémoire et disque suffisantes pour le changement de taille de vos NSX Edge.",
+  "dedicatedCloud_manage_nsx_choice_title_MEDIUM": "NSX Edge - Medium",
+  "dedicatedCloud_manage_nsx_choice_description_MEDIUM": "Convient lorsque seules les fonctionnalités L2 à L4 telles que NAT, le routage, le pare-feu L4, l'équilibreur de charge L4 sont requises et que le débit total est inférieur à 2 Gbits/s.",
+  "dedicatedCloud_manage_nsx_choice_footer": "{{cpu}} vCPU - {{ram}}Go RAM - {{storage}} Go",
+  "dedicatedCloud_manage_nsx_choice_title_LARGE": "NSX Edge - Large",
+  "dedicatedCloud_manage_nsx_choice_description_LARGE": "Convient lorsque seules les fonctionnalités L2 à L4 telles que NAT, le routage, le pare-feu L4, l'équilibreur de charge L4 sont requises et que le débit total est de 2 à 10 Gbits/s. Il est également approprié lorsque l'équilibreur de charge L7 (par exemple, le déchargement SSL) est requis.",
+  "dedicatedCloud_manage_nsx_choice_title_XLARGE": "NSX Edge - Extra-large",
+  "dedicatedCloud_manage_nsx_choice_description_XLARGE": "Utilisez le format très grand si vous souhaitez configurer un grand nombre d'homologues BGP avec le nœud Edge. Convient lorsque le débit total requis est de plusieurs Gbits/s pour l'équilibreur de charge L7 et le VPN.",
+  "dedicatedCloud_nsx_task_progress": "En cours",
+  "dedicatedCloud_datacenter_nsx_resize_error": "Une erreur est survenue",
+  "dedicatedCloud_tab_datacenter_global_information": "Par défaut, tous virtuels data centers(VDC) NSX disposent d'un cluster NSX Edge composé de 2 NSX Edge. Vous avez ensuite la possibilité de modifier la taille des Edges, vous devez disposer de ressources nécessaires pour modifier la taille ou le nombre des Edges.",
   "dedicatedCloud_description": "Nom",
   "dedicatedCloud_datacenter_delete": "Supprimer le datacentre",
   "dedicatedCloud_datacenter_description": "Description",