ovh · sachinrameshn · Apr 2, 2025
@@ -19,6 +19,7 @@ export default {
     canEditVolumes: '<',
     isDashboardAvailable: '<',
     trackClick: '<',
+    goToEditVolumeReserveSpace: '<',
     totalVolumesStorage: '<',
   },
   template,

@@ -0,0 +1,12 @@
+import template from './template.html';
+import controller from './controller';
+
+export default {
+  bindings: {
+    storage: '<',
+    volume: '<',
+    goBack: '<',
+  },
+  template,
+  controller,
+};
@@ -0,0 +1,8 @@
+export const BOUNDARIES = {
+  MIN_SPACE_PERCENT: 5,
+  MAX_SPACE_PERCENT: 100,
+};
+
+export default {
+  BOUNDARIES,
+};
@@ -0,0 +1,54 @@
+import { BOUNDARIES } from './constant';
+
+export default class VolumeEditReserveSpaceCtrl {
+  /* @ngInject */
+  constructor($translate, EditReserveSpaceService) {
+    this.$translate = $translate;
+    this.EditReserveSpaceService = EditReserveSpaceService;
+  }
+
+  $onInit() {
+    this.isLoading = true;
+    this.errorMessage = null;
+    this.model = {
+      percent: BOUNDARIES.MIN_SPACE_PERCENT,
+    };
+
+    this.boundaries = BOUNDARIES;
+    this.EditReserveSpaceService.getSnapshotReserveSpace(
+      this.storage.id,
+      this.volume,
+    ).then((data) => {
+      this.model.percent = data.percent;
+      this.isLoading = false;
+    });
+  }
+
+  cancel() {
+    this.goBack();
+  }
+
+  modifySnapshotReserveSpace() {
+    this.EditReserveSpaceService.modifySnapshotReserveSpace(
+      this.storage.id,
+      this.volume,
+      this.model.percent,
+    )
+      .then(() => {
+        this.goBack(
+          this.$translate.instant('netapp_volumes_edit_reserve_space_success', {
+            volumeName: this.volume.name || this.volume.id,
+          }),
+        );
+      })
+      .catch((error) => {
+        this.errorMessage = this.$translate.instant(
+          'netapp_volumes_edit_reserve_space_error',
+          {
+            message: error?.data?.message || error.message,
+            requestId: error.headers('X-Ovh-Queryid'),
+          },
+        );
+      });
+  }
+}
@@ -0,0 +1,13 @@
+import angular from 'angular';
+import component from './component';
+import service from './service';
+
+const moduleName = 'ovhManagerNetAppVolumesEditReserveSpaceModule';
+
+angular
+  .module(moduleName, ['oui', 'pascalprecht.translate'])
+  .service('EditReserveSpaceService', service)
+  .component('ovhManagerNetAppVolumesEditReserveSpaceComponent', component)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;
@@ -0,0 +1,21 @@
+export default class NetAppDashboardEditReserveSpaceService {
+  /* @ngInject */
+  constructor($http) {
+    this.$http = $http;
+  }
+
+  modifySnapshotReserveSpace(serviceName, volume, newPercent) {
+    return this.$http.put(
+      `/storage/netapp/${serviceName}/share/${volume.id}/snapshotReserve`,
+      {
+        percent: newPercent,
+      },
+    );
+  }
+
+  getSnapshotReserveSpace(serviceName, volume) {
+    return this.$http
+      .get(`/storage/netapp/${serviceName}/share/${volume.id}/snapshotReserve`)
+      .then(({ data }) => data);
+  }
+}
@@ -0,0 +1,30 @@
+<oui-modal
+    data-heading="{{:: 'netapp_volumes_edit_reserve_space_title' | translate }}"
+    data-loading="$ctrl.isLoading"
+    data-primary-action="$ctrl.modifySnapshotReserveSpace()"
+    data-primary-label="{{:: 'netapp_volumes_edit_reserve_space_submit' | translate }}"
+    data-primary-disabled="$ctrl.editVolumeSizeForm.$invalid"
+    data-
+    secondary-action="$ctrl.cancel()"
+    data-secondary-label="{{:: 'netapp_volumes_edit_reserve_space_cancel' | translate }}"
+    data-on-dismiss="$ctrl.cancel()"
+>
+    <oui-message data-type="error" data-ng-if="$ctrl.errorMessage">
+        <span data-ng-bind-html="$ctrl.errorMessage"></span>
+    </oui-message>
+    <form novalidate name="$ctrl.editVolumeSizeForm">
+        <oui-field
+            data-label="{{:: 'netapp_volumes_edit_reserve_space_label' | translate: { name: $ctrl.volume.name || $ctrl.volume.id } }}"
+            data-help-text="{{:: 'netapp_volumes_edit_reserve_space_rules' | translate: { min: $ctrl.boundaries.MIN_SPACE_PERCENT, max: $ctrl.boundaries.MAX_SPACE_PERCENT } }}"
+        >
+            <oui-numeric
+                data-id="percent"
+                data-name="percent"
+                data-min="$ctrl.boundaries.MIN_SPACE_PERCENT"
+                data-max="$ctrl.boundaries.MAX_SPACE_PERCENT"
+                data-model="$ctrl.model.percent"
+            >
+            </oui-numeric>
+        </oui-field>
+    </form>
+</oui-modal>
@@ -0,0 +1,9 @@
+{
+  "netapp_volumes_edit_reserve_space_title": "Modifier la réserve des snapshots",
+  "netapp_volumes_edit_reserve_space_submit": "Modifier l'espace",
+  "netapp_volumes_edit_reserve_space_cancel": "Annuler",
+  "netapp_volumes_edit_reserve_space_label": "Espace réservé",
+  "netapp_volumes_edit_reserve_space_rules": "Taille autorisée : min {{min}}%, max {{max}}%",
+  "netapp_volumes_edit_reserve_space_success": "L'espace réservé pour les snapshots sera modifiée dans quelques instants",
+  "netapp_volumes_edit_reserve_space_error": "Une erreur est survenue <br> {{message}} <br> request_id: {{requestId}}"
+}
@@ -12,6 +12,8 @@ export default {
     updateVolume: '<',
     goToVolumeDashboard: '<',
     goToEditVolumeSize: '<',
+    goToEditVolumeReserveSpace: '<',
+    volumeReserveSpacePercentage: '<',
   },
   controller,
   template,

@@ -0,0 +1,26 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName =
+  'ovhManagerNetAppVolumesDashboardEditReserveSpaceLazyLoading';
+
+angular.module(moduleName, ['ui.router', 'oc.lazyLoad']).config(
+  /* @ngInject */ ($stateProvider) => {
+    $stateProvider.state(
+      'netapp.dashboard.volumes.dashboard.edit-reserve-space.**',
+      {
+        url: '/edit-reserve-space',
+        lazyLoad: ($transition$) => {
+          const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+
+          return import('./module').then((mod) =>
+            $ocLazyLoad.inject(mod.default || mod),
+          );
+        },
+      },
+    );
+  },
+);
+
+export default moduleName;
@@ -0,0 +1,20 @@
+import angular from 'angular';
+import '@ovh-ux/manager-core';
+import '@uirouter/angularjs';
+import 'angular-translate';
+import routing from './routing';
+import editReserveSpace from '../../components/edit-reserve-space';
+
+const moduleName = 'ovhManagerNetAppVolumesDashboardEditReserveSpace';
+
+angular
+  .module(moduleName, [
+    'ovhManagerCore',
+    'pascalprecht.translate',
+    'ui.router',
+    editReserveSpace,
+  ])
+  .config(routing)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;
@@ -0,0 +1,24 @@
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state(
+    'netapp.dashboard.volumes.dashboard.edit-reserve-space',
+    {
+      url: '/edit-reserve-space',
+      views: {
+        modal: {
+          component: 'ovhManagerNetAppVolumesEditReserveSpaceComponent',
+        },
+      },
+      layout: 'modal',
+      resolve: {
+        breadcrumb: () => null,
+        volumeId: /* @ngInject */ ($transition$) =>
+          $transition$.params().volumeId,
+        volume: /* @ngInject */ (volumes, volumeId) =>
+          volumes.find(({ id }) => id === volumeId),
+        goBack: /* @ngInject */ (goToVolumeDetails, volume) => (message) => {
+          goToVolumeDetails(volume, message);
+        },
+      },
+    },
+  );
+};
@@ -11,6 +11,7 @@ import routing from './routing';
 import aclModule from './acl';
 import snapshotsModule from './snapshots';
 import editSize from './edit-size';
+import editReserveSpace from './edit-reserve-space';
 
 const moduleName = 'ovhManagerNetAppVolumesDashboard';
 
@@ -23,6 +24,7 @@ angular
     aclModule,
     snapshotsModule,
     editSize,
+    editReserveSpace,
   ])
   .config(routing)
   .component('ovhManagerNetAppVolumesDashboard', component)

@@ -87,6 +87,26 @@ export default /* @ngInject */ ($stateProvider) => {
           volumeId,
         });
       },
+      volumeReserveSpacePercentage: /* @ngInject */ (
+        $http,
+        serviceName,
+        volumeId,
+      ) =>
+        $http
+          .get(
+            `/storage/netapp/${serviceName}/share/${volumeId}/snapshotReserve`,
+          )
+          .then(({ data }) => data?.percent || 5)
+          .catch(() => null),
+      goToEditVolumeReserveSpace: /* @ngInject */ (
+        $state,
+        serviceName,
+        volumeId,
+      ) => () =>
+        $state.go('netapp.dashboard.volumes.dashboard.edit-reserve-space', {
+          serviceName,
+          volumeId,
+        }),
       breadcrumb: /* @ngInject */ (volumeId) => volumeId,
     },
   });

@@ -78,6 +78,20 @@
                         </oui-action-menu-item>
                     </oui-action-menu>
                 </oui-tile-definition>
+                <oui-tile-definition
+                    data-term="{{:: 'netapp_volumes_dashboard_information_reserve_space' | translate }}"
+                    data-description="{{ $ctrl.volumeReserveSpacePercentage + '%'}}"
+                >
+                    <oui-action-menu compact>
+                        <oui-action-menu-item
+                            data-on-click="$ctrl.goToEditVolumeReserveSpace()"
+                        >
+                            <span
+                                data-translate="netapp_volumes_edit_reserve_space"
+                            ></span>
+                        </oui-action-menu-item>
+                    </oui-action-menu>
+                </oui-tile-definition>
             </oui-tile>
             <oui-tile
                 class="col-md-8"

@@ -6,6 +6,7 @@
   "netapp_volumes_dashboard_information_protocol": "Protocole",
   "netapp_volumes_dashboard_information_size": "Taille du volume",
   "netapp_volumes_dashboard_information_size_unit": "{{size }} Go",
+  "netapp_volumes_dashboard_information_reserve_space": "Réserve des snapshots",
   "netapp_volumes_dashboard_connection": "Connexion des volumes",
   "netapp_volumes_dashboard_connection_mount_path": "Mount path",
   "netapp_volumes_dashboard_connection_how_to": "Comment connecter votre volume",

@@ -0,0 +1,22 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName = 'ovhManagerNetAppVolumesEditReserveSpaceLazyLoading';
+
+angular.module(moduleName, ['ui.router', 'oc.lazyLoad']).config(
+  /* @ngInject */ ($stateProvider) => {
+    $stateProvider.state('netapp.dashboard.volumes.edit-reserve-space.**', {
+      url: '/edit-reserve-space',
+      lazyLoad: ($transition$) => {
+        const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+
+        return import('./module').then((mod) =>
+          $ocLazyLoad.inject(mod.default || mod),
+        );
+      },
+    });
+  },
+);
+
+export default moduleName;
@@ -0,0 +1,21 @@
+import angular from 'angular';
+import '@ovh-ux/manager-core';
+import '@uirouter/angularjs';
+import 'angular-translate';
+import editSize from '../components/edit-reserve-space';
+
+import routing from './routing';
+
+const moduleName = 'ovhManagerNetAppVolumesEditReserveSpace';
+
+angular
+  .module(moduleName, [
+    'ovhManagerCore',
+    'pascalprecht.translate',
+    'ui.router',
+    editSize,
+  ])
+  .config(routing)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;
@@ -0,0 +1,21 @@
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('netapp.dashboard.volumes.edit-reserve-space', {
+    url: '/edit-reserve-space?volumeId',
+    views: {
+      modal: {
+        component: 'ovhManagerNetAppVolumesEditReserveSpaceComponent',
+      },
+    },
+    layout: 'modal',
+    resolve: {
+      breadcrumb: () => null,
+      volumeId: /* @ngInject */ ($transition$) =>
+        $transition$.params().volumeId,
+      volume: /* @ngInject */ (volumes, volumeId) =>
+        volumes.find(({ id }) => id === volumeId),
+      goBack: /* @ngInject */ (goToVolumes) => (message) => {
+        goToVolumes(message);
+      },
+    },
+  });
+};
@@ -11,6 +11,7 @@ import create from './create';
 import deleteModule from './delete';
 import dashboard from './dashboard';
 import editSize from './edit-size';
+import editReserveSpace from './edit-reserve-space';
 
 const moduleName = 'ovhManagerNetAppVolumes';
 
@@ -24,6 +25,7 @@ angular
     deleteModule,
     dashboard,
     editSize,
+    editReserveSpace,
   ])
   .config(routing)
   .component('ovhManagerNetAppVolumes', component)