feat(dedicated): add datacenter network tab

ref: MANAGER-16613

Signed-off-by: Paul Dickerson <paul.dickerson.ext@ovhcloud.com>

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

@@ -11,10 +11,12 @@ export default {
     drpAvailability: '<',
     drpState: '<',
     hostsState: '<',
+    networkState: '<',
     newProductUrl: '<',
     dedicatedCloudPCCMigrationState: '<?',
     dedicatedCloudVCDMigrationState: '<?',
     vcdTrackingPrefix: '<?',
+    isNsxCompatible: '<',
   },
   controller,
   template,

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

@@ -49,6 +49,11 @@
         >
             <span data-translate="dedicatedCloud_tab_drp"></span>
         </oui-header-tabs-item>
+        <oui-header-tabs-item
+            data-ng-if="$ctrl.isNsxCompatible"
+            data-state="{{:: $ctrl.networkState }}"
+            ><span data-translate="dedicatedCloud_tab_network"></span
+        ></oui-header-tabs-item>
     </oui-header-tabs>
 </header>
 

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

@@ -4,7 +4,7 @@ import template from './dedicatedCloud-datacenter-host.html';
 export default {
   bindings: {
     datacenterId: '<',
-    datacenter: '<',
+    datacenterWithInfoProxy: '<',
     orderHost: '<',
     productId: '<',
     resourceUpgrade: '<',

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

@@ -26,22 +26,7 @@ export default class {
     this.RESOURCE_BILLING_TYPES = RESOURCE_BILLING_TYPES;
     this.RESOURCE_UPGRADE_TYPES = RESOURCE_UPGRADE_TYPES;
 
-    return this.fetchDatacenterInfoProxy();
-  }
-
-  fetchDatacenterInfoProxy() {
-    this.loading = true;
-
-    return this.DedicatedCloud.getDatacenterInfoProxy(
-      this.productId,
-      this.datacenterId,
-    )
-      .then(({ commercialRangeName }) => {
-        this.datacenter.model.commercialRangeName = commercialRangeName;
-      })
-      .finally(() => {
-        this.loading = false;
-      });
+    this.datacenter = this.datacenterWithInfoProxy;
   }
 
   fetchLegacyHostConsumption(hosts) {

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

@@ -1,10 +1,7 @@
 <div class="dedicatedCloud-datacenter-hosts">
     <h2 data-translate="dedicatedCloud_tab_host"></h2>
 
-    <div class="text-center" data-ng-if="$ctrl.loading">
-        <oui-spinner></oui-spinner>
-    </div>
-    <div data-ng-if="!$ctrl.loading">
+    <div>
         <div class="mb-3">
             <button
                 type="button"

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

@@ -0,0 +1,10 @@
+import controller from './dedicatedCloud-datacenter-network.controller';
+import template from './dedicatedCloud-datacenter-network.html';
+
+export default {
+  bindings: {
+    network: '<',
+  },
+  controller,
+  template,
+};

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

@@ -0,0 +1,6 @@
+export default class {
+  /* @ngInject */
+  constructor($state) {
+    this.$state = $state;
+  }
+}

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

@@ -0,0 +1 @@
+<div>Network Page</div>

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/datacenter/network/index.js

@@ -0,0 +1,15 @@
+import angular from 'angular';
+
+import 'angular-translate';
+import '@ovh-ux/ui-kit';
+
+import component from './dedicatedCloud-datacenter-network.component';
+
+const moduleName = 'ovhManagerDedicatedCloudDatacenterNetworkComponent';
+
+angular
+  .module(moduleName, ['oui', 'pascalprecht.translate'])
+  .component('ovhManagerDedicatedCloudDatacenterNetwork', component)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

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

@@ -0,0 +1,10 @@
+import controller from './dedicatedCloud-datacenter-network-onboarding.controller';
+import template from './dedicatedCloud-datacenter-network-onboarding.html';
+
+export default {
+  bindings: {
+    network: '<',
+  },
+  controller,
+  template,
+};

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

@@ -0,0 +1,7 @@
+export default class {
+  /* @ngInject */
+  constructor($state, $translate) {
+    this.$state = $state;
+    this.$translate = $translate;
+  }
+}

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

@@ -0,0 +1,36 @@
+<div
+    data-translate="dedicatedCloud_datacenter_network_onboarding_description1"
+></div>
+<div
+    data-translate="dedicatedCloud_datacenter_network_onboarding_description2"
+></div>
+<div
+    data-translate="dedicatedCloud_datacenter_network_onboarding_cta_start"
+></div>
+<div
+    data-translate="dedicatedCloud_datacenter_network_onboarding_cta_more"
+></div>
+<div
+    data-translate="dedicatedCloud_datacenter_network_onboarding_doc_category_tutorial"
+></div>
+<div
+    data-translate="dedicatedCloud_datacenter_network_onboarding_doc_category_faq"
+></div>
+<div
+    data-translate="dedicatedCloud_datacenter_network_onboarding_doc1_title"
+></div>
+<div
+    data-translate="dedicatedCloud_datacenter_network_onboarding_doc1_description"
+></div>
+<div
+    data-translate="dedicatedCloud_datacenter_network_onboarding_doc2_title"
+></div>
+<div
+    data-translate="dedicatedCloud_datacenter_network_onboarding_doc2_description"
+></div>
+<div
+    data-translate="dedicatedCloud_datacenter_network_onboarding_doc3_title"
+></div>
+<div
+    data-translate="dedicatedCloud_datacenter_network_onboarding_doc3_description"
+></div>

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/datacenter/network/onboarding/index.js

@@ -0,0 +1,16 @@
+import angular from 'angular';
+
+import 'angular-translate';
+import '@ovh-ux/ui-kit';
+
+import component from './dedicatedCloud-datacenter-network-onboarding.component';
+
+const moduleName =
+  'ovhManagerDedicatedCloudDatacenterNetworkOnboardingComponent';
+
+angular
+  .module(moduleName, ['oui', 'pascalprecht.translate'])
+  .component('ovhManagerDedicatedCloudDatacenterNetworkOnboarding', component)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

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

@@ -0,0 +1,14 @@
+{
+  "dedicatedCloud_datacenter_network_onboarding_description1": "En activant cette option, vous pourrez redimensionner, ajouter ou supprimer des NSX Edges selon vos besoins.",
+  "dedicatedCloud_datacenter_network_onboarding_description2": "Cette option fonctionne sur un modèle de facturation à la consommation : toute modification de la configuration standard des NSX Edges entraînera des frais supplémentaires.",
+  "dedicatedCloud_datacenter_network_onboarding_cta_start": "Commencer",
+  "dedicatedCloud_datacenter_network_onboarding_cta_more": "En savoir plus",
+  "dedicatedCloud_datacenter_network_onboarding_doc_category_tutorial": "Tutoriel",
+  "dedicatedCloud_datacenter_network_onboarding_doc_category_faq": "FAQ",
+  "dedicatedCloud_datacenter_network_onboarding_doc1_title": "Premier pas avec NSX",
+  "dedicatedCloud_datacenter_network_onboarding_doc1_description": "Découvrez NSX, la solution de gestion de réseau Software-Defined Networking (SDN) fournie par VMware.",
+  "dedicatedCloud_datacenter_network_onboarding_doc2_title": "Comment activer NSX-T sur la solution VMware on OVHcloud",
+  "dedicatedCloud_datacenter_network_onboarding_doc2_description": "Découvrez comment attribuer des droits à un utilisateur et aux datacenters pour NSX-T",
+  "dedicatedCloud_datacenter_network_onboarding_doc3_title": "NSX - FAQ",
+  "dedicatedCloud_datacenter_network_onboarding_doc3_description": "Retrouvez les réponses aux questions les plus fréquentes sur l'utilisation de NSX au sein de l'écosystème Hosted Private Cloud."
+}

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

@@ -6,6 +6,7 @@
   "dedicatedCloud_tab_datastore": "Datastores",
   "dedicatedCloud_tab_backup": "Backup",
   "dedicatedCloud_tab_drp": "Plan de reprise d’activité (PRA)",
+  "dedicatedCloud_tab_network": "Network",
   "dedicatedCloud_datacenter_EOL_title": "Date de fin de vie de Dedicated Cloud : 30 Septembre 2022",
   "dedicatedCloud_datacenter_EOL_part_1": "Nous vous avons informé en Octobre 2021 que nos offres Dedicated Cloud arrivaient en fin de vie et seront définitivement arrêtées le 30 Septembre 2022. Cette étape est importante pour vos plateformes VMware afin d’améliorer la qualité de service, les performances et la sécurité de vos clusters. En effet, le matériel des offres « Dedicated Cloud » utilisé, antérieur à 2018, ne nous permet plus d’assurer le meilleur niveau de service et l’intégration avec les nouvelles architectures modernes de VMware.",
   "dedicatedCloud_datacenter_EOL_part_2": "Suite à nos précédentes communications, de nombreux clients ont entamé cette planification et migration et nous vous invitons donc à faire de même afin d'éviter cette date butoir du 30 Septembre 2022."

packages/manager/apps/dedicated/client/app/components/dedicated-cloud/dedicatedCloud.service.js

@@ -1715,6 +1715,12 @@ class DedicatedCloudService {
       .get(`/dedicatedCloud/${serviceName}/location`)
       .then(({ data }) => data);
   }
+
+  getDatacenterOptions(serviceId) {
+    return this.$http
+      .get(`/services/${serviceId}/options`)
+      .then(({ data }) => data);
+  }
 }
 
 angular.module(moduleName, []).service('DedicatedCloud', DedicatedCloudService);

packages/manager/apps/dedicated/client/app/dedicatedCloud/datacenter/dedicatedCloud-datacenter.constants.js

@@ -0,0 +1,10 @@
+export const NSX_COMPATIBLE_COMMERCIAL_RANGE = [
+  'NSX',
+  'NSX-T',
+  'SDDC 2016',
+  'SDDC 2018',
+];
+
+export default {
+  NSX_COMPATIBLE_COMMERCIAL_RANGE,
+};

packages/manager/apps/dedicated/client/app/dedicatedCloud/datacenter/dedicatedCloud-datacenter.module.js

@@ -6,6 +6,7 @@ import datacenterComponent from '../../components/dedicated-cloud/datacenter';
 import datastore from './datastore';
 import drp from './drp';
 import host from './host';
+import network from './network';
 import routing from './dedicatedCloud-datacenter.routing';
 
 const moduleName = 'ovhManagerDedicatedCloudDatacenter';
@@ -18,6 +19,7 @@ angular
     datastore,
     drp,
     host,
+    network,
   ])
   .config(routing);
 

packages/manager/apps/dedicated/client/app/dedicatedCloud/datacenter/dedicatedCloud-datacenter.routing.js

@@ -1,3 +1,5 @@
+import { NSX_COMPATIBLE_COMMERCIAL_RANGE } from './dedicatedCloud-datacenter.constants';
+
 export default /* @ngInject */ ($stateProvider) => {
   $stateProvider.state('app.dedicatedCloud.details.datacenter.details', {
     url: '/:datacenterId',
@@ -28,6 +30,29 @@ export default /* @ngInject */ ($stateProvider) => {
             id: datacenterId,
           },
         })),
+      datacenterWithInfoProxy: /* @ngInject */ (
+        datacenter,
+        DedicatedCloud,
+        datacenterId,
+        productId,
+      ) => {
+        return DedicatedCloud.getDatacenterInfoProxy(
+          productId,
+          datacenterId,
+        ).then((datacenterInfoProxy) => ({
+          model: {
+            ...datacenterInfoProxy,
+            ...datacenter.model,
+          },
+        }));
+      },
+      isNsxCompatible: /* @ngInject */ (datacenterWithInfoProxy) => {
+        const vdcRange = datacenterWithInfoProxy.model.commercialRangeName;
+        return NSX_COMPATIBLE_COMMERCIAL_RANGE.some(
+          (range) =>
+            range === vdcRange || range.toLocaleLowerCase() === vdcRange,
+        );
+      },
       deleteDatacenter: /* @ngInject */ ($state) => () =>
         $state.go(
           'app.dedicatedCloud.details.datacenter.details.dashboard.delete',
@@ -39,6 +64,8 @@ export default /* @ngInject */ ($stateProvider) => {
         'app.dedicatedCloud.details.datacenter.details.datastores',
       drpState: () => 'app.dedicatedCloud.details.datacenter.details.drp',
       hostsState: () => 'app.dedicatedCloud.details.datacenter.details.hosts',
+      networkState: () =>
+        'app.dedicatedCloud.details.datacenter.details.network',
       goToHosts: /* @ngInject */ ($state) => () =>
         $state.go('app.dedicatedCloud.details.datacenter.details.hosts'),
       goToDatastores: /* @ngInject */ ($state) => () =>
@@ -47,6 +74,8 @@ export default /* @ngInject */ ($stateProvider) => {
         $state.go('app.dedicatedCloud.details.datacenter.details.backup'),
       goToDrp: /* @ngInject */ ($state) => () =>
         $state.go('app.dedicatedCloud.details.datacenter.details.drp'),
+      goToNetwork: /* @ngInject */ ($state) => () =>
+        $state.go('app.dedicatedCloud.details.datacenter.details.network'),
       goToDrpSummary: /* @ngInject */ ($state, currentDrp) => () =>
         $state.go('app.dedicatedCloud.details.datacenter.details.drp.summary', {
           drpInformations: currentDrp,

packages/manager/apps/dedicated/client/app/dedicatedCloud/datacenter/host/index copy.js

@@ -0,0 +1,21 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName = 'ovhManagerDedicatedCloudDatacenterLazyloading';
+
+angular.module(moduleName, ['ui.router', 'oc.lazyLoad']).config(
+  /* @ngInject */ ($stateProvider) => {
+    $stateProvider.state('app.dedicatedCloud.details.datacenter.details.**', {
+      url: '/:datacenterId',
+      lazyLoad: ($transition$) => {
+        const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+        return import('./dedicatedCloud-datacenter.module').then((mod) =>
+          $ocLazyLoad.inject(mod.default || mod),
+        );
+      },
+    });
+  },
+);
+
+export default moduleName;

packages/manager/apps/dedicated/client/app/dedicatedCloud/datacenter/network/dedicatedCloud-datacenter-network.module.js

@@ -0,0 +1,13 @@
+import angular from 'angular';
+
+import networkComponent from '../../../components/dedicated-cloud/datacenter/network';
+import routing from './dedicatedCloud-datacenter-network.routing';
+
+const moduleName = 'ovhManagerDedicatedCloudDatacenterNetworkModule';
+
+angular
+  .module(moduleName, [networkComponent])
+  .config(routing)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/apps/dedicated/client/app/dedicatedCloud/datacenter/network/dedicatedCloud-datacenter-network.routing.js

@@ -0,0 +1,27 @@
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state(
+    'app.dedicatedCloud.details.datacenter.details.network',
+    {
+      url: '/network',
+      views: {
+        pccDatacenterView: 'ovhManagerDedicatedCloudDatacenterNetwork',
+      },
+      redirectTo: (transition) =>
+        transition
+          .injector()
+          .getAsync('resources')
+          .then((resources) =>
+            resources.length === 0
+              ? {
+                  state:
+                    'app.dedicatedCloud.details.datacenter.details.network.onboarding',
+                }
+              : false,
+          ),
+      resolve: {
+        resources: /* @ngInject */ ($http) =>
+          $http.get('/dedicatedCloud').then(({ data }) => data),
+      },
+    },
+  );
+};

packages/manager/apps/dedicated/client/app/dedicatedCloud/datacenter/network/index.js

@@ -0,0 +1,24 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName = 'ovhManagerDedicatedCloudDatacenterNetworkLazyloading';
+
+angular.module(moduleName, ['ui.router', 'oc.lazyLoad']).config(
+  /* @ngInject */ ($stateProvider) => {
+    $stateProvider.state(
+      'app.dedicatedCloud.details.datacenter.details.network.**',
+      {
+        url: '/network',
+        lazyLoad: ($transition$) => {
+          const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+          return import(
+            './dedicatedCloud-datacenter-network.module'
+          ).then((mod) => $ocLazyLoad.inject(mod.default || mod));
+        },
+      },
+    );
+  },
+);
+
+export default moduleName;

packages/manager/apps/dedicated/client/app/dedicatedCloud/datacenter/network/onboarding/dedicatedCloud-datacenter-network-onboarding.module.js

@@ -0,0 +1,13 @@
+import angular from 'angular';
+
+import networkOnboardingComponent from '../../../../components/dedicated-cloud/datacenter/network/onboarding';
+import routing from './dedicatedCloud-datacenter-network-onboarding.routing';
+
+const moduleName = 'ovhManagerDedicatedCloudDatacenterNetworkOnboardingModule';
+
+angular
+  .module(moduleName, [networkOnboardingComponent])
+  .config(routing)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;