feat(kube): add ip restrictions

ref: MANAGER-5296

Signed-off-by: Marie JONES <[email protected]>

packages/manager/modules/pci/src/projects/project/kubernetes/details/component.js

@@ -9,6 +9,8 @@ const component = {
     guideUrl: '<',
     nodePoolsLink: '<',
     serviceLink: '<',
+    restrictionsLink: '<',
+    restrictions: '<',
   },
   template,
   controller,

packages/manager/modules/pci/src/projects/project/kubernetes/details/details.module.js

@@ -12,6 +12,7 @@ import routing from './details.routing';
 import containersComponent from './containers/index';
 import nodePools from './node-pool';
 import serviceComponent from './service/index';
+import restrictions from './restrictions';
 
 import './index.scss';
 
@@ -28,6 +29,7 @@ angular
     containersComponent,
     nodePools,
     serviceComponent,
+    restrictions,
   ])
   .config(routing)
   .run(/* @ngTranslationsInject:json ./translations */)

packages/manager/modules/pci/src/projects/project/kubernetes/details/details.routing.js

@@ -18,6 +18,11 @@ export default /* @ngInject */ ($stateProvider) => {
           kubeId,
           projectId,
         }),
+      restrictionsLink: /* @ngInject */ ($state, kubeId, projectId) =>
+        $state.href('pci.projects.project.kubernetes.details.restrictions', {
+          kubeId,
+          projectId,
+        }),
       currentActiveLink: /* @ngInject */ ($transition$, $state) => () =>
         $state.href($state.current.name, $transition$.params()),
       goToKubernetesDetails: ($state, CucCloudMessage, kubeId, projectId) => (
@@ -56,6 +61,11 @@ export default /* @ngInject */ ($stateProvider) => {
           kubeId,
           projectId,
         }),
+      loadRestrictions: /* @ngInject */ ($http, kubeId, projectId) => () =>
+        $http
+          .get(`/cloud/project/${projectId}/kube/${kubeId}/ipRestrictions`)
+          .then(({ data }) => data)
+          .catch(() => []),
     },
 
     redirectTo: 'pci.projects.project.kubernetes.details.service',

packages/manager/modules/pci/src/projects/project/kubernetes/details/restrictions/IPv4.class.js

@@ -0,0 +1,12 @@
+export default class IPv4 {
+  constructor(ip) {
+    const [cidr, mask] = ip.split('/');
+    this.address = ip;
+    this.cidr = cidr;
+    this.mask = parseInt(mask, 10) || 32;
+  }
+
+  format() {
+    return `${this.cidr}/${this.mask}`;
+  }
+}

packages/manager/modules/pci/src/projects/project/kubernetes/details/restrictions/component.js

@@ -0,0 +1,14 @@
+import controller from './controller';
+import template from './template.html';
+
+const component = {
+  bindings: {
+    restrictions: '<',
+    updateRestrictions: '<',
+    deleteRestriction: '<',
+  },
+  controller,
+  template,
+};
+
+export default component;

packages/manager/modules/pci/src/projects/project/kubernetes/details/restrictions/controller.js

@@ -0,0 +1,112 @@
+import IPv4 from './IPv4.class';
+
+export default class KubernetesRestrictionsCtrl {
+  /* @ngInject */
+  constructor($translate, CucCloudMessage) {
+    this.$translate = $translate;
+    this.CucCloudMessage = CucCloudMessage;
+  }
+
+  $onInit() {
+    this.loadMessages();
+    this.getIps(this.restrictions);
+    this.selectRow(this.ips.length);
+    this.currentIp = null;
+  }
+
+  loadMessages() {
+    this.CucCloudMessage.unSubscribe(
+      'pci.projects.project.kubernetes.details.restrictions',
+    );
+    this.messageHandler = this.CucCloudMessage.subscribe(
+      'pci.projects.project.kubernetes.details.restrictions',
+      { onMessage: () => this.refreshMessages() },
+    );
+  }
+
+  refreshMessages() {
+    this.messages = this.messageHandler.getMessages();
+  }
+
+  getIps(restrictions) {
+    this.ips = restrictions.map((ip) => new IPv4(ip));
+  }
+
+  selectRow(index) {
+    this.currentEditedRow = index;
+  }
+
+  addRestriction() {
+    this.currentIp = null;
+    this.ips.push({});
+    this.selectRow(this.ips.length - 1);
+  }
+
+  editRestriction(rowIndex) {
+    this.selectRow(rowIndex);
+    this.currentIp = this.ips[rowIndex].address;
+    if (!this.ips[this.ips.length - 1].address) {
+      this.ips.pop();
+    }
+  }
+
+  deleteIp(ip, index) {
+    this.isLoading = true;
+    return this.deleteRestriction(ip.address)
+      .then(() => {
+        this.ips.splice(index, 1);
+        return this.CucCloudMessage.success(
+          this.$translate.instant('kube_restrictions_add_success'),
+        );
+      })
+      .catch(
+        (error) =>
+          `${this.CucCloudMessage.error(
+            this.$translate.instant('kube_restrictions_add_error'),
+          )}${error.data}`,
+      )
+      .finally(() => {
+        this.isLoading = false;
+      });
+  }
+
+  saveRestrictions(index) {
+    this.isLoading = true;
+    this.ips[index] = new IPv4(this.currentIp);
+    this.selectRow(this.ips.length);
+    return this.updateRestrictions(this.ips.map((ip) => ip.format()))
+      .then((restrictions) => {
+        this.getIps(restrictions);
+        return this.CucCloudMessage.success(
+          this.$translate.instant('kube_restrictions_add_success'),
+        );
+      })
+      .catch(
+        (error) =>
+          `${this.CucCloudMessage.error(
+            this.$translate.instant('kube_restrictions_add_error'),
+          )}${error.data}`,
+      )
+      .finally(() => {
+        this.isLoading = false;
+      });
+  }
+
+  isIPValid() {
+    try {
+      const [cidr, mask] = this.currentIp.split('/');
+      const splittedCidr = cidr.split('.');
+      if (splittedCidr.length !== 4) {
+        return false;
+      }
+      if (mask || mask === '') {
+        splittedCidr.push(mask);
+      }
+      return splittedCidr.every(
+        (value) => parseInt(value, 10) >= 0 && parseInt(value, 10) < 256,
+      );
+    } catch (error) {
+      return false;
+    }
+  }
+}

packages/manager/modules/pci/src/projects/project/kubernetes/details/restrictions/index.js

@@ -0,0 +1,25 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName = 'ovhManagerPciProjectKubernetesDetailsLazyloading';
+
+angular.module(moduleName, ['ui.router', 'oc.lazyLoad']).config(
+  /* @ngInject */ ($stateProvider) => {
+    $stateProvider.state(
+      'pci.projects.project.kubernetes.details.restrictions.**',
+      {
+        url: '/restrictions',
+        lazyLoad: ($transition$) => {
+          const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+
+          return import('./restrictions.module').then((mod) =>
+            $ocLazyLoad.inject(mod.default || mod),
+          );
+        },
+      },
+    );
+  },
+);
+
+export default moduleName;

packages/manager/modules/pci/src/projects/project/kubernetes/details/restrictions/restrictions.module.js

@@ -0,0 +1,14 @@
+import angular from 'angular';
+
+import component from './component';
+import routing from './routing';
+
+const moduleName = 'ovhManagerPciProjectKubernetesRestrictions';
+
+angular
+  .module(moduleName, [])
+  .config(routing)
+  .component('pciProjectKubernetesRestrictions', component)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/modules/pci/src/projects/project/kubernetes/details/restrictions/routing.js

@@ -0,0 +1,27 @@
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('pci.projects.project.kubernetes.details.restrictions', {
+    url: '/restrictions',
+    views: {
+      kubernetesView: 'pciProjectKubernetesRestrictions',
+    },
+    resolve: {
+      breadcrumb: /* @ngInject */ ($translate) =>
+        $translate.instant('kube_restrictions'),
+      restrictions: /* @ngInject */ (loadRestrictions) => loadRestrictions(),
+      updateRestrictions: /* @ngInject */ ($http, kubeId, projectId) => (ips) =>
+        $http
+          .put(`/cloud/project/${projectId}/kube/${kubeId}/ipRestrictions`, {
+            ips,
+          })
+          .then(({ data }) => data),
+      deleteRestriction: /* @ngInject */ ($http, kubeId, projectId) => (ip) =>
+        $http
+          .delete(
+            `/cloud/project/${projectId}/kube/${kubeId}/ipRestrictions/${encodeURIComponent(
+              ip,
+            )}`,
+          )
+          .then(({ data }) => data),
+    },
+  });
+};

packages/manager/modules/pci/src/projects/project/kubernetes/details/restrictions/template.html

@@ -0,0 +1,111 @@
+<div>
+    <h2 data-translate="kube_restrictions_manage"></h2>
+    <p data-translate="kube_restrictions_manage_description"></p>
+    <cui-message-container
+        data-messages="$ctrl.messages"
+    ></cui-message-container>
+
+    <oui-button
+        variant="secondary"
+        on-click="$ctrl.addRestriction()"
+        icon-left="oui-icon-add"
+        class="mb-3"
+    >
+        <span data-translate="kube_restrictions_add"></span>
+    </oui-button>
+    <oui-datagrid rows="$ctrl.ips" data-ng-if="$ctrl.ips.length">
+        <oui-datagrid-column
+            title=":: 'kube_restrictions_allowed_clients' | translate"
+        >
+            <span
+                data-ng-if="$ctrl.currentEditedRow !== $rowIndex"
+                data-ng-bind=":: $row.format()"
+            ></span>
+            <label
+                data-ng-if="$ctrl.currentEditedRow === $rowIndex"
+                class="sr-only"
+                for="{{:: 'ip-' + $rowIndex}}"
+                data-translate="kube_restrictions_allowed_clients_add"
+            ></label>
+            <input
+                data-ng-if="$ctrl.currentEditedRow === $rowIndex"
+                class="oui-input oui-input_m"
+                data-ng-class="{
+                    'oui-input_error': !$ctrl.isIPValid() && $ctrl.currentIp
+                    }"
+                id="{{:: 'ip' + $rowIndex }}"
+                type="text"
+                required
+                data-ng-model="$ctrl.currentIp"
+            />
+        </oui-datagrid-column>
+        <oui-datagrid-column>
+            <div class="float-right">
+                <oui-button
+                    data-ng-if="$ctrl.currentEditedRow === $rowIndex"
+                    size="s"
+                    variant="secondary"
+                    disabled="$ctrl.isLoading && !$ctrl.isIPValid()"
+                    on-click="$ctrl.saveRestrictions($rowIndex)"
+                >
+                    <span
+                        class="oui-icon oui-icon-success"
+                        aria-hidden="true"
+                    ></span>
+                    <span
+                        class="sr-only"
+                        data-translate="kube_restrictions_update"
+                    ></span>
+                </oui-button>
+                <oui-button
+                    data-ng-if="$ctrl.currentEditedRow === $rowIndex"
+                    size="s"
+                    variant="secondary"
+                    disabled="$ctrl.isLoading"
+                    on-click="$ctrl.selectRow($ctrl.ips.length)"
+                >
+                    <span
+                        class="oui-icon oui-icon-close"
+                        aria-hidden="true"
+                    ></span>
+                    <span
+                        class="sr-only"
+                        data-translate="kube_restrictions_cancel"
+                    ></span>
+                </oui-button>
+                <oui-button
+                    data-ng-if="$ctrl.currentEditedRow !== $rowIndex"
+                    size="s"
+                    variant="secondary"
+                    disabled="$ctrl.isLoading"
+                    on-click="$ctrl.editRestriction($rowIndex)"
+                >
+                    <span
+                        class="oui-icon oui-icon-pen"
+                        aria-hidden="true"
+                    ></span>
+                    <span
+                        class="sr-only"
+                        data-translate="kube_restrictions_edit"
+                    ></span>
+                </oui-button>
+                <oui-button
+                    data-ng-if="$ctrl.currentEditedRow !== $rowIndex"
+                    size="s"
+                    variant="secondary"
+                    disabled="$ctrl.isLoading"
+                    on-click="$ctrl.deleteIp($row, $rowIndex)"
+                >
+                    <span
+                        class="oui-icon oui-icon-bin"
+                        aria-hidden="true"
+                    ></span>
+                    <span
+                        class="sr-only"
+                        data-translate="kube_restrictions_delete"
+                    ></span>
+                </oui-button>
+            </div>
+        </oui-datagrid-column>
+    </oui-datagrid>
+</div>

packages/manager/modules/pci/src/projects/project/kubernetes/details/restrictions/translations/Messages_fr_FR.json

@@ -0,0 +1,14 @@
+{
+  "kube_restrictions": "Accès APIServer",
+  "kube_restrictions_manage": "Gérer les accès à l'APIServer",
+  "kube_restrictions_manage_description": "Choisissez les plages IPv4 pouvant accéder à l'APIServer de votre cluster. En l'absence d'IP, aucune restriction n'est appliquée",
+  "kube_restrictions_allowed_clients": "Clients autorisés",
+  "kube_restrictions_add": "Ajouter une nouvelle limitation",
+  "kube_restrictions_allowed_clients_add": "IP à ajouter",
+  "kube_restrictions_add_success": "Les limitations APIServer ont été modifiées avec succès.",
+  "kube_restrictions_add_error": "Une erreur est survenue lors de la modification des limitations.",
+  "kube_restrictions_update": "Valider",
+  "kube_restrictions_cancel": "Annuler",
+  "kube_restrictions_edit": "Mettre à jour",
+  "kube_restrictions_delete": "Supprimer"
+}

packages/manager/modules/pci/src/projects/project/kubernetes/details/service/service.component.js

@@ -17,6 +17,8 @@ const component = {
     updateCluster: '<',
     updatePolicy: '<',
     isVersionSupported: '<',
+    restrictionsLink: '<',
+    loadRestrictions: '<',
   },
   template,
   controller,