feat(pci.project.storage.volume-snapshots): add empty page

ref: MANAGER-2280

Author: Cyrille Bourgois

packages/manager/modules/pci/src/projects/project/storages/snapshots/onboarding/index.js

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

packages/manager/modules/pci/src/projects/project/storages/snapshots/onboarding/onboarding.component.js

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

packages/manager/modules/pci/src/projects/project/storages/snapshots/onboarding/onboarding.constants.js

@@ -0,0 +1,8 @@
+export const GUIDES = [
+  {
+    id: 'transfer-volume-backup',
+    link: 'https://docs.ovh.com/gb/en/public-cloud/transfer_volume_backup_from_one_datacentre_to_another/',
+  },
+];
+
+export default { GUIDES };

packages/manager/modules/pci/src/projects/project/storages/snapshots/onboarding/onboarding.controller.js

@@ -0,0 +1,26 @@
+import reduce from 'lodash/reduce';
+import { GUIDES } from './onboarding.constants';
+
+export default class PciStorageSnapshotsOnboardingController {
+  /* @ngInject */
+  constructor(
+    $translate,
+  ) {
+    this.$translate = $translate;
+  }
+
+  $onInit() {
+    this.guides = reduce(
+      GUIDES,
+      (list, guide) => ([
+        ...list,
+        {
+          ...guide,
+          title: this.$translate.instant(`pci_projects_project_storages_snapshots_onboarding_guides_${guide.id}_title`),
+          description: this.$translate.instant(`pci_projects_project_storages_snapshots_onboarding_guides_${guide.id}_description`),
+        },
+      ]),
+      [],
+    );
+  }
+}

packages/manager/modules/pci/src/projects/project/storages/snapshots/onboarding/onboarding.html

@@ -0,0 +1,15 @@
+<pci-project-empty guides="$ctrl.guides">
+    <h1 data-translate="pci_projects_project_storages_snapshots_title"></h1>
+    <p data-translate="pci_projects_project_storages_snapshots_onboarding_content1"></p>
+    <strong data-translate="pci_projects_project_storages_snapshots_onboarding_content2"></strong>
+    <p data-translate="pci_projects_project_storages_snapshots_onboarding_content3"></p>
+    <p data-translate="pci_projects_project_storages_snapshots_onboarding_content4"></p>
+    <p data-translate="pci_projects_project_storages_snapshots_onboarding_content5"></p>
+
+    <oui-button
+        data-variant="primary"
+        data-on-click="$ctrl.addSnapshot()">
+        <span data-translate="pci_projects_project_storages_snapshots_onboarding_action_label"></span>
+    </oui-button>
+
+</pci-project-empty>

packages/manager/modules/pci/src/projects/project/storages/snapshots/onboarding/onboarding.module.js

@@ -0,0 +1,26 @@
+import angular from 'angular';
+import '@ovh-ux/ng-translate-async-loader';
+import '@uirouter/angularjs';
+import 'angular-translate';
+import 'ovh-ui-angular';
+
+import component from './onboarding.component';
+import routing from './onboarding.routing';
+
+import empty from '../../../../../components/project/empty';
+
+const moduleName = 'ovhManagerPciStoragesSnapshotsOnboarding';
+
+angular
+  .module(moduleName, [
+    empty,
+    'ui.router',
+    'oui',
+    'ngTranslateAsyncLoader',
+    'pascalprecht.translate',
+  ])
+  .config(routing)
+  .component('pciProjectStorageSnapshotsOnboarding', component)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/modules/pci/src/projects/project/storages/snapshots/onboarding/onboarding.routing.js

@@ -0,0 +1,18 @@
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider
+    .state('pci.projects.project.storages.snapshots.onboarding', {
+      url: '/onboarding',
+      component: 'pciProjectStorageSnapshotsOnboarding',
+      resolve: {
+        breadcrumb: () => null, // Hide breadcrumb
+        addSnapshot: /* @ngInject */ ($state, projectId) => () => $state.go('pci.projects.project.storages.blocks', {
+          projectId,
+          help: 'snapshot',
+        }),
+      },
+      translations: {
+        value: ['.'],
+        format: 'json',
+      },
+    });
+};

packages/manager/modules/pci/src/projects/project/storages/snapshots/onboarding/translations/Messages_fr_FR.json

@@ -0,0 +1,11 @@
+{
+  "pci_projects_project_storages_snapshots_onboarding_content1": "Vous n'avez pas encore créé de snapshot de volumes.",
+  "pci_projects_project_storages_snapshots_onboarding_content2": "Déclenchez un snapshot sur vos volumes Block Storage.",
+  "pci_projects_project_storages_snapshots_onboarding_content3": "Les snapshots de volumes sont des photographies de volumes Block Storage à un instant t. Ils vous permettent de revenir en arrière, en créant de nouveaux volumes basés sur cet état figé. Vous retrouvez ainsi des données ou une situation souhaitée dans le passé.",
+  "pci_projects_project_storages_snapshots_onboarding_content4": "Un snapshot de volumes est stocké au même endroit que le volume dont il est issu et bénéficie également de la triple réplication.",
+  "pci_projects_project_storages_snapshots_onboarding_content5": "Pour créer un snapshot de volume vous avez forcément besoin d'avoir créer au moins un volume.",
+  "pci_projects_project_storages_snapshots_onboarding_action_label": "Créer un snapshot de volume",
+
+  "pci_projects_project_storages_snapshots_onboarding_guides_transfer-volume-backup_title": "Transférer la sauvegarde d’un volume d’un datacenter à l’autre",
+  "pci_projects_project_storages_snapshots_onboarding_guides_transfer-volume-backup_description": "Apprenez à déplacer une sauvegarde de volume entre différents centres de données"
+}

packages/manager/modules/pci/src/projects/project/storages/snapshots/snapshots.module.js

@@ -7,6 +7,7 @@ import 'ovh-api-services';
 
 import snapshot from './snapshot';
 import snapshotDelete from './snapshot/delete';
+import onboarding from './onboarding';
 
 import component from './snapshots.component';
 import service from './snapshots.service';
@@ -24,6 +25,7 @@ angular
     'ui.router',
     snapshot,
     snapshotDelete,
+    onboarding,
   ])
   .config(routing)
   .component('pciProjectStoragesSnapshots', component)

packages/manager/modules/pci/src/projects/project/storages/snapshots/snapshots.routing.js

@@ -3,6 +3,10 @@ export default /* @ngInject */ ($stateProvider) => {
     .state('pci.projects.project.storages.snapshots', {
       url: '/volume-snapshots',
       component: 'pciProjectStoragesSnapshots',
+      redirectTo: transition => transition
+        .injector()
+        .getAsync('snapshots')
+        .then(snapshots => (snapshots.length === 0 ? { state: 'pci.projects.project.storages.snapshots.onboarding' } : false)),
       resolve: {
         snapshots: /* @ngInject */ (
           PciProjectStorageSnapshotsService,