feat(dedicated): add iplb delete option for us

packages/manager/modules/iplb/src/home/index.js

@@ -7,14 +7,16 @@ import IpLoadBalancerHomeService from './iplb-home.service';
 import IpLoadBalancerHomeStatusService from './iplb-home-status.service';
 import IpLoadBalancerUpdateQuotaCtrl from './updateQuota/iplb-update-quota.controller';
 import IplbBulletChartComponent from './bullet-chart.component';
-
+import IpLoadBalancerTerminateCtrl from '../modal/terminate/terminate.controller';
 import IplbHeaderTemplate from '../header/iplb-dashboard-header.html';
 import IplbHomeTemplate from './iplb-home.html';
 
 import './bullet-chart.less';
 import './status-card.less';
 import './home.less';
 
+import { LB_DELETE_FEATURE } from './iplb-home.constants';
+
 const moduleName = 'ovhManagerIplbHome';
 
 angular
@@ -41,6 +43,14 @@ angular
         },
         resolve: {
           breadcrumb: () => null,
+          isDeleteOptionsAvailable: /* @ngInject */ (ovhFeatureFlipping) => {
+            return ovhFeatureFlipping
+              .checkFeatureAvailability([LB_DELETE_FEATURE])
+              .then((featureAvailability) =>
+                featureAvailability.isFeatureAvailable(LB_DELETE_FEATURE),
+              )
+              .catch(() => false);
+          },
         },
       });
     },
@@ -53,6 +63,7 @@ angular
   .controller('IpLoadBalancerHomeCtrl', IpLoadBalancerHomeCtrl)
   .service('IpLoadBalancerHomeStatusService', IpLoadBalancerHomeStatusService)
   .controller('IpLoadBalancerUpdateQuotaCtrl', IpLoadBalancerUpdateQuotaCtrl)
+  .controller('IpLoadBalancerTerminateCtrl', IpLoadBalancerTerminateCtrl)
   .directive('iplbBulletChart', IplbBulletChartComponent)
   .run(/* @ngTranslationsInject:json ./translations */);
 

packages/manager/modules/iplb/src/home/iplb-home.constants.js

@@ -25,6 +25,7 @@ export const MESSAGE_DISPLAY_DATE = '2023-04-01';
 
 export const LB_TEMPORARY_WARNING_BANNER_FEATURE =
   'ip-load-balancer:lb-temporary-warning-banner';
+export const LB_DELETE_FEATURE = 'ip-load-balancer:delete';
 
 export const LB_SUBSCRIPTION_CONTACT_SECTION =
   'ip-load-balancer:lb-contact-section';
@@ -33,5 +34,6 @@ export default {
   INFO_LINK,
   MESSAGE_DISPLAY_DATE,
   LB_TEMPORARY_WARNING_BANNER_FEATURE,
+  LB_DELETE_FEATURE,
   LB_SUBSCRIPTION_CONTACT_SECTION,
 };

packages/manager/modules/iplb/src/home/iplb-home.controller.js

@@ -8,6 +8,7 @@ import map from 'lodash/map';
 import 'moment';
 
 import IplbHomeUpdateQuotaTemplate from './updateQuota/iplb-update-quota.html';
+import IpLoadBalancerTerminateTemplate from '../modal/terminate/terminate.html';
 import {
   INFO_LINK,
   MESSAGE_DISPLAY_DATE,
@@ -40,6 +41,7 @@ export default class IpLoadBalancerHomeCtrl {
     ovhManagerRegionService,
     CucVrackService,
     ovhFeatureFlipping,
+    isDeleteOptionsAvailable,
   ) {
     this.$http = $http;
     this.$state = $state;
@@ -63,6 +65,7 @@ export default class IpLoadBalancerHomeCtrl {
     this.ovhManagerRegionService = ovhManagerRegionService;
     this.VrackService = CucVrackService;
     this.ovhFeatureFlipping = ovhFeatureFlipping;
+    this.isDeleteOptionsAvailable = isDeleteOptionsAvailable;
 
     this.serviceName = this.$stateParams.serviceName;
 
@@ -247,6 +250,24 @@ export default class IpLoadBalancerHomeCtrl {
         text: this.$translate.instant('iplb_edit'),
         isAvailable: () => false,
       },
+      deleteService: {
+        callback: () =>
+          this.CucControllerHelper.modal.showModal({
+            modalConfig: {
+              template: IpLoadBalancerTerminateTemplate,
+              controller: 'IpLoadBalancerTerminateCtrl',
+              controllerAs: '$ctrl',
+              resolve: {
+                service: () => this,
+              },
+            },
+          }),
+        text: this.$translate.instant('iplb_delete'),
+        isAvailable: () =>
+          this.isDeleteOptionsAvailable &&
+          !this.subscription.loading &&
+          !this.subscription.hasErrors,
+      },
       manageAutorenew: {
         text: this.$translate.instant('iplb_manage'),
         href: this.coreURLBuilder.buildURL('dedicated', '#/billing/autoRenew', {

packages/manager/modules/iplb/src/home/iplb-home.html

@@ -393,6 +393,15 @@
                                     data-ng-bind="::$ctrl.actions.manageAutorenew.text"
                                 ></span>
                             </oui-action-menu-item>
+
+                            <oui-action-menu-item
+                                aria-label="{{::$ctrl.actions.deleteService.text}}"
+                                data-ng-if="$ctrl.actions.deleteService.isAvailable()"
+                                data-on-click="$ctrl.actions.deleteService.callback()"
+                                ><span
+                                    data-ng-bind="::$ctrl.actions.deleteService.text"
+                                ></span>
+                            </oui-action-menu-item>
                         </oui-action-menu>
                     </oui-tile-definition>
                     <oui-tile-definition

packages/manager/modules/iplb/src/index.js

@@ -5,11 +5,12 @@ import 'oclazyload';
 import '@ovh-ux/ui-kit/dist/css/oui.css';
 
 import onboarding from './onboarding';
+import listing from './listing';
 
 const moduleName = 'ovhManagerIplbLazyLoading';
 
 angular
-  .module(moduleName, ['ui.router', 'oc.lazyLoad', onboarding])
+  .module(moduleName, ['ui.router', 'oc.lazyLoad', onboarding, listing])
   .config(
     /* @ngInject */ ($stateProvider, $urlRouterProvider) => {
       $stateProvider

packages/manager/modules/iplb/src/iplb.module.js

@@ -7,19 +7,15 @@ import ngTranslateAsyncLoader from '@ovh-ux/ng-translate-async-loader';
 import { ListLayoutHelper } from '@ovh-ux/manager-ng-layout-helpers';
 import ngOvhFeatureFlipping from '@ovh-ux/ng-ovh-feature-flipping';
 
-import routing from './iplb.routing';
-
 const moduleName = 'ovhManagerIpLoadBalancer';
 
-angular
-  .module(moduleName, [
-    ngOvhFeatureFlipping,
-    ngTranslateAsyncLoader,
-    'oui',
-    'pascalprecht.translate',
-    'ovhManagerFilters',
-    ListLayoutHelper.moduleName,
-  ])
-  .config(routing);
+angular.module(moduleName, [
+  ngOvhFeatureFlipping,
+  ngTranslateAsyncLoader,
+  'oui',
+  'pascalprecht.translate',
+  'ovhManagerFilters',
+  ListLayoutHelper.moduleName,
+]);
 
 export default moduleName;

packages/manager/modules/iplb/src/listing/constants.js

@@ -0,0 +1,19 @@
+export const DEFAULT_NUMBER_OF_COLUMNS = 4;
+
+export const STRING_COLUMN_OPTIONS = [
+  'contains',
+  'startsWith',
+  'endsWith',
+  'is',
+  'isNot',
+];
+
+export const NUMBER_COLUMN_OPTIONS = ['is'];
+export const LB_DELETE_FEATURE = 'ip-load-balancer:delete';
+
+export default {
+  DEFAULT_NUMBER_OF_COLUMNS,
+  NUMBER_COLUMN_OPTIONS,
+  STRING_COLUMN_OPTIONS,
+  LB_DELETE_FEATURE,
+};

packages/manager/modules/iplb/src/listing/index.js

@@ -0,0 +1,19 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import '@ovh-ux/ui-kit';
+import '@ovh-ux/manager-core';
+
+import IpLoadBalancerTerminateCtrl from '../modal/terminate/terminate.controller';
+import iplbListing from './listing.component';
+import route from './listing.route';
+
+const moduleName = 'iplbListing';
+
+angular
+  .module(moduleName, ['oui', 'ui.router', 'ovhManagerCore'])
+  .controller('IpLoadBalancerTerminateCtrl', IpLoadBalancerTerminateCtrl)
+  .component('iplbListing', iplbListing)
+  .config(route)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/modules/iplb/src/listing/listing.component.js

@@ -0,0 +1,25 @@
+import { ListLayoutHelper } from '@ovh-ux/manager-ng-layout-helpers';
+import controller from './listing.controller';
+import template from './listing.html';
+
+export default {
+  bindings: {
+    ...ListLayoutHelper.componentBindings,
+    header: '<',
+    staticResources: '<?',
+    id: '@',
+    description: '<',
+    loadResource: '<?',
+    columns: '<',
+    customizableColumns: '<?',
+    defaultFilterColumn: '<',
+    getServiceNameLink: '<?',
+    options: '<?',
+    formatters: '<?',
+    topbarOptions: '<?',
+    customizeColumnsMap: '<?',
+    isDeleteOptionsAvailable: '<',
+  },
+  template,
+  controller,
+};

packages/manager/modules/iplb/src/listing/listing.controller.js

@@ -0,0 +1,114 @@
+import get from 'lodash/get';
+import map from 'lodash/map';
+
+import { NUMBER_COLUMN_OPTIONS, STRING_COLUMN_OPTIONS } from './constants';
+import template from '../modal/terminate/terminate.html';
+
+export default class iplbListingCtrl {
+  /* @ngInject */
+  constructor($state, $q, ouiDatagridService, CucControllerHelper) {
+    this.$q = $q;
+    this.$state = $state;
+    this.ouiDatagridService = ouiDatagridService;
+    this.CucControllerHelper = CucControllerHelper;
+  }
+
+  $onInit() {
+    this.datagridId = `dg-${this.id}`;
+    this.getDisplayedColumns(this.columns);
+    this.dataNaviId = `${this.id}-list`;
+
+    this.criteria = JSON.parse(this.filter).map((criteria) => ({
+      property: get(criteria, 'field') || this.defaultFilterColumn,
+      operator: get(criteria, 'comparator'),
+      value: criteria.reference[0],
+    }));
+
+    this.stringColumnOptions = {
+      operators: STRING_COLUMN_OPTIONS,
+    };
+
+    this.numberColumnOptions = {
+      operators: NUMBER_COLUMN_OPTIONS,
+    };
+  }
+
+  loadPage() {
+    return this.$q.resolve({
+      data: get(this.resources, 'data'),
+      meta: {
+        totalCount: this.paginationTotalCount,
+      },
+    });
+  }
+
+  getSorting(property) {
+    return this.sort === property ? this.sortOrder.toLowerCase() : '';
+  }
+
+  getDisplayedColumns(columns) {
+    this.displayedColumns = columns
+      ? JSON.stringify(
+          map(
+            columns.filter(({ hidden }) => !hidden),
+            ({ name, property }) => name || property,
+          ),
+        )
+      : [];
+  }
+
+  onPageChange({ pageSize, offset }) {
+    this.onParamsChange({
+      page: parseInt(offset / pageSize, 10) + 1,
+      pageSize,
+    });
+  }
+
+  onCriteriaChange($criteria) {
+    const filter = $criteria.map((criteria) => ({
+      field: get(criteria, 'property') || this.defaultFilterColumn,
+      comparator: criteria.operator,
+      reference: [criteria.value],
+    }));
+
+    this.onParamsChange({
+      filter: JSON.stringify(filter),
+    });
+  }
+
+  onSortChange({ name, order }) {
+    this.onParamsChange({
+      sort: name,
+      sortOrder: order,
+    });
+  }
+
+  onParamsChange(params) {
+    return this.onListParamsChange({
+      ...params,
+      columns: this.displayedColumns,
+    });
+  }
+
+  onColumnChange(id, columns) {
+    this.getDisplayedColumns(columns);
+    return this.onListParamsChange();
+  }
+
+  gotoService({ serviceName }) {
+    this.$state.go('iplb.detail.home', { serviceName });
+  }
+
+  deleteIplb(service) {
+    this.CucControllerHelper.modal.showModal({
+      modalConfig: {
+        template,
+        controller: 'IpLoadBalancerTerminateCtrl',
+        controllerAs: '$ctrl',
+        resolve: {
+          service: () => service,
+        },
+      },
+    });
+  }
+}

packages/manager/modules/iplb/src/listing/listing.html

@@ -0,0 +1,34 @@
+<div class="iplb">
+    <oui-header class="mb-2" data-heading="{{:: $ctrl.header }}"></oui-header>
+</div>
+<oui-datagrid
+    id="{{ $ctrl.datagridId }}"
+    rows-loader="$ctrl.loadPage()"
+    row-loader="$ctrl.loadResource($row)"
+    columns="$ctrl.columns"
+    customizable="true"
+    criteria="$ctrl.criteria"
+    on-columns-parameters-change="$ctrl.onColumnChange(id, columns)"
+    on-page-change="$ctrl.onPageChange($pagination)"
+    on-criteria-change="$ctrl.onCriteriaChange($criteria)"
+    page-size="{{ $ctrl.paginationSize }}"
+    page="{{ $ctrl.paginationNumber }}"
+    on-sort-change="$ctrl.onSortChange($sort)"
+    data-navi-id="{{ $ctrl.dataNaviId }}"
+>
+    <oui-datagrid-topbar data-ng-if="$ctrl.topbarOptions">
+        <topbar-cta data-options="$ctrl.topbarOptions"> </topbar-cta>
+    </oui-datagrid-topbar>
+    <oui-action-menu
+        data-compact
+        data-placement="end"
+        data-ng-if="$ctrl.isDeleteOptionsAvailable"
+    >
+        <oui-action-menu-item data-on-click="$ctrl.gotoService($row)">
+            <span data-translate="iplb_listing_action_detail"></span>
+        </oui-action-menu-item>
+        <oui-action-menu-item data-on-click="$ctrl.deleteIplb($row)">
+            <span data-translate="iplb_listing_action_delete"></span>
+        </oui-action-menu-item>
+    </oui-action-menu>
+</oui-datagrid>