feat(octavia.pools.members): add IP instance - step 1 (#10433)

ref: MANAGER-10688 Signed-off-by: kelbarak <[email protected]>
ovh · Dec 1, 2023 · 521f543 · 521f543
1 parent 0f8a777
commit 521f543
Show file tree

Hide file tree

Showing 13 changed files with 264 additions and 10 deletions.
diff --git a/...lancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/component.js b/...lancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/component.js
@@ -0,0 +1,10 @@
+import controller from './controller';
+import template from './template.html';
+
+export default {
+  bindings: {
+    projectId: '<',
+  },
+  controller,
+  template,
+};
diff --git a/...ancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/controller.js b/...ancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/controller.js
@@ -0,0 +1,79 @@
+export default class OctaviaLoadBalancerPoolsDetailMembersAddIpInstanceCtrl {
+  /* @ngInject */
+
+  constructor(Alerter, OctaviaLoadBalancerMembersService, $translate) {
+    this.Alerter = Alerter;
+    this.OctaviaLoadBalancerMembersService = OctaviaLoadBalancerMembersService;
+    this.$translate = $translate;
+  }
+
+  $onInit() {
+    this.model = {
+      checked: [],
+    };
+    this.instances = [];
+    this.displayedInstances = [];
+    this.resetCurrentStep();
+    this.loadIpInstances();
+  }
+
+  loadIpInstances() {
+    this.isLoading = true;
+    this.OctaviaLoadBalancerMembersService.getInstances(this.projectId)
+      .then((instances) => {
+        // For each instance, we create a new instance per ip address
+        // We create a new instance only for IPV4 ip address
+        angular.forEach(instances, (instance) => {
+          this.computeIpV4Instance(instance);
+        });
+        this.displayedInstances = [...this.instances];
+      })
+      .catch((error) => {
+        this.Alerter.error(
+          this.$translate.instant('octavia_load_balancer_global_error', {
+            message: error.data?.message,
+            requestId: error.headers('X-Ovh-Queryid'),
+          }),
+          'octavia.alerts.members',
+        );
+      })
+      .finally(() => {
+        this.isLoading = false;
+      });
+  }
+
+  computeIpV4Instance(instance) {
+    instance.ipAddresses.forEach((ipAddress) => {
+      if (ipAddress.version === 4) {
+        // The label displayed = name of the instance (ip address)
+        this.instances.push({
+          label: `${instance.name} (${ipAddress.ip}) `,
+        });
+
+        // Push false in the checked array. It will be used
+        // in the next step to identify which instance have been selected
+        this.model.checked.push(false);
+      }
+    });
+  }
+
+  resetCurrentStep() {
+    this.currentStep = 0;
+  }
+
+  onSearchInstance(value) {
+    this.displayedInstances = this.instances.filter((instance) =>
+      instance.label.toLowerCase().includes(value.toLowerCase()),
+    );
+  }
+
+  onSearchReset() {
+    this.displayedInstances = [...this.instances];
+  }
+
+  isValid() {
+    return this.model.checked
+      ? this.model.checked.some((checked) => checked === true)
+      : false;
+  }
+}
diff --git a/...d-balancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/index.js b/...d-balancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/index.js
@@ -0,0 +1,28 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+import './style.less';
+
+const moduleName =
+  'ovhManagerOctaviaLoadBalancerDashboardPoolsDetailMembersAddIpInstanceLazyLoading';
+
+angular.module(moduleName, ['ui.router', 'oc.lazyLoad']).config(
+  /* @ngInject */ ($stateProvider) => {
+    $stateProvider.state(
+      'octavia-load-balancer.loadbalancer.pools.detail.members.add-ip-instance.**',
+      {
+        url: '/add-ip-instance',
+        lazyLoad: ($transition$) => {
+          const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+
+          return import('./module').then((mod) =>
+            $ocLazyLoad.inject(mod.default || mod),
+          );
+        },
+      },
+    );
+  },
+);
+
+export default moduleName;
diff --git a/...-balancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/module.js b/...-balancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/module.js
@@ -0,0 +1,15 @@
+import angular from 'angular';
+
+import component from './component';
+import routing from './routing';
+
+const moduleName =
+  'ovhManagerOctaviaLoadBalancerPoolsDetailMembersAddIpInstance';
+
+angular
+  .module(moduleName, [])
+  .config(routing)
+  .component('octaviaLoadBalancerPoolsDetailMembersAddIpInstance', component)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;
diff --git a/...balancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/routing.js b/...balancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/routing.js
@@ -0,0 +1,18 @@
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state(
+    'octavia-load-balancer.loadbalancer.pools.detail.members.add-ip-instance',
+    {
+      url: '/add-ip-instance',
+      views: {
+        loadbalancerPoolsDetailMembersView:
+          'octaviaLoadBalancerPoolsDetailMembersAddIpInstance',
+      },
+      resolve: {
+        breadcrumb: () => null,
+      },
+      atInternet: {
+        ignore: true,
+      },
+    },
+  );
+};
diff --git a/...balancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/style.less b/...balancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/style.less
@@ -0,0 +1,4 @@
+.box-ip-instance {
+  max-height: 50dvh;
+  overflow-y: scroll;
+}
diff --git a/...ancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/template.html b/...ancer/src/load-balancers/load-balancer/pools/detail/members/add-ip-instance/template.html
@@ -0,0 +1,71 @@
+<oui-stepper
+    data-current-index="$ctrl.currentStep"
+    data-on-finish="$ctrl.addIpInstances()"
+>
+    <!-- IP INSTANCES SELECTION -->
+    <oui-step-form
+        data-header="{{ ::'octavia_load_balancer_pools_detail_members_add_ip_instance_title' | translate }}"
+        data-submit-text="{{ ::'octavia_load_balancer_pools_detail_members_add_ip_instance_action' | translate }}"
+        data-valid="$ctrl.isValid()"
+        data-loading="$ctrl.isLoading"
+        data-description="{{ ::'octavia_load_balancer_pools_detail_members_add_ip_instance_description' | translate }}"
+        data-prevent-next="true"
+        data-on-focus="$ctrl.resetCurrentStep()"
+    >
+        <div class="row mb-2">
+            <div class="col-md-8">
+                <oui-message
+                    type="warning"
+                    aria-close-button-label="{{ ::'octavia_load_balancer_pools_detail_members_add_ip_instance_aria_label_close' | translate}}"
+                    on-dismiss="$ctrl.onDismiss()"
+                    dismissable
+                >
+                    {{
+                    ::'octavia_load_balancer_pools_detail_members_add_ip_instance_banner'
+                    | translate}}
+                </oui-message>
+            </div>
+        </div>
+        <div class="row mb-2">
+            <div class="col-md-4">
+                <oui-search
+                    model="$ctrl.searchInstance"
+                    on-change="$ctrl.onSearchInstance(modelValue)"
+                    on-reset="$ctrl.onSearchReset()"
+                    placeholder="{{ ::'octavia_load_balancer_pools_detail_members_add_ip_instance_search_placeholder'| translate}}"
+                >
+                </oui-search>
+            </div>
+        </div>
+        <div class="row mb-2">
+            <div class="col-md-8">
+                <div class="oui-box oui-box_light box-ip-instance">
+                    <span
+                        data-ng-repeat="instance in $ctrl.displayedInstances track by $index"
+                    >
+                        <oui-checkbox
+                            data-name="{{'instance-' + $index}}"
+                            data-model="$ctrl.model.checked[$index]"
+                        >
+                            <span data-ng-bind="instance.label"></span>
+                        </oui-checkbox>
+                    </span>
+                    <span data-ng-if="$ctrl.displayedInstances.length === 0">
+                        {{
+                        ::'octavia_load_balancer_pools_detail_members_add_ip_instance_search_not_found'|
+                        translate}}
+                    </span>
+                </div>
+            </div>
+        </div>
+    </oui-step-form>
+
+    <!-- IP INSTANCES PORT SELECTION -->
+    <oui-step-form
+        data-header="{{ 'octavia_load_balancer_pools_detail_members_add_ip_instance_port_title' | translate }}"
+        data-valid="true"
+        data-editable="false"
+        data-on-focus="$ctrl.addPortFocus()"
+    >
+    </oui-step-form>
+</oui-stepper>
diff --git a/...ncers/load-balancer/pools/detail/members/add-ip-instance/translations/Messages_fr_FR.json b/...ncers/load-balancer/pools/detail/members/add-ip-instance/translations/Messages_fr_FR.json
@@ -0,0 +1,10 @@
+{
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_banner": "Tout changement d'IP d'une instance après la configuration devra être répercuté manuellement dans la configuration du Pool.",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_title": "Ajouter des IPs d'instance",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_action": "Continuer",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_description": "Cette table contient les instances de votre projet Public Cloud. En les choisissant, leurs IPs seront configurées comme membre.",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_port_title": "Ajouter les ports de vos IPs d'instances",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_search_not_found": "Aucune instance trouvée",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_search_placeholder": "Rechercher une instance",
+  "octavia_load_balancer_pools_detail_members_add_ip_instance_aria_label_close": "Fermer"
+}
diff --git a/...via-load-balancer/src/load-balancers/load-balancer/pools/detail/members/list/component.js b/...via-load-balancer/src/load-balancers/load-balancer/pools/detail/members/list/component.js
@@ -4,8 +4,10 @@ export default {
   bindings: {
     members: '<',
     goToMemberDeletion: '<',
-    memberCreationLink: '<',
-    membersPageTracking: '<',
+    memberAddLink: '<',
+    trackMemberAddAction: '<',
+    memberAddInstanceLink: '<',
+    trackMemberAddInstanceAction: '<',
   },
   template,
 };
diff --git a/...tavia-load-balancer/src/load-balancers/load-balancer/pools/detail/members/list/routing.js b/...tavia-load-balancer/src/load-balancers/load-balancer/pools/detail/members/list/routing.js
@@ -24,12 +24,18 @@ export default /* @ngInject */ ($stateProvider) => {
             region,
             poolId,
           ),
-        memberCreationLink: /* @ngInject */ ($state) => () =>
+        memberAddLink: /* @ngInject */ ($state) => () =>
           $state.href(
             'octavia-load-balancer.loadbalancer.pools.detail.members.list.create',
           ),
-        membersPageTracking: () =>
+        trackMemberAddAction: () =>
           `${TRACKING_NAME}::${TRACKING_SUFFIX}::${TRACKING_HIT_PREFIX}::add`,
+        memberAddInstanceLink: /* @ngInject */ ($state) => () =>
+          $state.href(
+            'octavia-load-balancer.loadbalancer.pools.detail.members.add-ip-instance',
+          ),
+        trackMemberAddInstanceAction: () =>
+          `${TRACKING_NAME}::${TRACKING_SUFFIX}::${TRACKING_HIT_PREFIX}::add-instances`,
         goToMemberDeletion: /* @ngInject */ ($state) => (member) =>
           $state.go(
             'octavia-load-balancer.loadbalancer.pools.detail.members.list.delete',

diff --git a/...ia-load-balancer/src/load-balancers/load-balancer/pools/detail/members/list/template.html b/...ia-load-balancer/src/load-balancers/load-balancer/pools/detail/members/list/template.html
@@ -2,23 +2,26 @@
     <oui-datagrid-topbar>
         <a
             class="oui-button oui-button_secondary"
-            data-ng-href="{{:: $ctrl.memberCreationLink() }}"
+            data-ng-href="{{:: $ctrl.memberAddLink() }}"
             data-track-on="click"
-            data-track-name="{{:: $ctrl.membersPageTracking}}"
+            data-track-name="{{:: $ctrl.trackMemberAddAction}}"
             data-track-type="action"
         >
             <span
                 data-translate="octavia_load_balancer_pools_detail_members_add_manually"
             ></span>
         </a>
-        <oui-button
-            data-ng-click="$ctrl.goToIpInstanceCreation()"
-            variant="secondary"
+        <a
+            class="oui-button oui-button_secondary"
+            data-ng-href="{{:: $ctrl.memberAddInstanceLink() }}"
+            data-track-on="click"
+            data-track-name="{{:: $ctrl.trackMemberAddInstanceAction}}"
+            data-track-type="action"
         >
             <span
                 data-translate="octavia_load_balancer_pools_detail_members_add_ip_instances"
             ></span>
-        </oui-button>
+        </a>
     </oui-datagrid-topbar>
 
     <oui-datagrid-column

diff --git a/...es/octavia-load-balancer/src/load-balancers/load-balancer/pools/detail/members/service.js b/...es/octavia-load-balancer/src/load-balancers/load-balancer/pools/detail/members/service.js
@@ -32,4 +32,10 @@ export default class OctaviaLoadBalancerMembersService {
       },
     );
   }
+
+  getInstances(projectId) {
+    return this.$http
+      .get(`/cloud/project/${projectId}/instance/`)
+      .then(({ data }) => data);
+  }
 }
diff --git a/packages/manager/modules/octavia-load-balancer/src/octavia-load-balancer.module.js b/packages/manager/modules/octavia-load-balancer/src/octavia-load-balancer.module.js
@@ -16,6 +16,7 @@ import pools from './load-balancers/load-balancer/pools';
 import poolsDetail from './load-balancers/load-balancer/pools/detail';
 import poolsDetailMembers from './load-balancers/load-balancer/pools/detail/members';
 import poolsDetailMembersCreate from './load-balancers/load-balancer/pools/detail/members/create';
+import poolsDetailMembersAddIpInstance from './load-balancers/load-balancer/pools/detail/members/add-ip-instance';
 
 import deleteComponent from './delete';
 import loadBalancers from './load-balancers';
@@ -41,6 +42,7 @@ angular
     poolsDetail,
     poolsDetailMembers,
     poolsDetailMembersCreate,
+    poolsDetailMembersAddIpInstance,
     deleteComponent,
     loadBalancers,
   ])