feat(pci.project.storages.cloudarchive): add empty page

ref: MANAGER-2280

Author: Cyrille Bourgois

packages/manager/modules/pci/src/projects/project/storages/cloud-archives/cloud-archives.routing.js

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

packages/manager/modules/pci/src/projects/project/storages/cloud-archives/index.js

@@ -11,6 +11,7 @@ import containers from '../containers';
 
 import addObject from './add';
 import cloudArchive from './cloud-archive';
+import onboarding from './onboarding';
 
 import routing from './cloud-archives.routing';
 
@@ -20,6 +21,7 @@ angular
   .module(moduleName, [
     addObject,
     containers,
+    onboarding,
     cloudArchive,
     'ngTranslateAsyncLoader',
     'oui',

packages/manager/modules/pci/src/projects/project/storages/cloud-archives/onboarding/index.js

@@ -0,0 +1,24 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName = 'ovhManagerPciStoragesCloudArchivesOnboardingLazyLoading';
+
+angular
+  .module(moduleName, [
+    'ui.router',
+    'oc.lazyLoad',
+  ])
+  .config(/* @ngInject */ ($stateProvider) => {
+    $stateProvider.state('pci.projects.project.storages.archives.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/cloud-archives/onboarding/onboarding.component.js

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

packages/manager/modules/pci/src/projects/project/storages/cloud-archives/onboarding/onboarding.constants.js

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

packages/manager/modules/pci/src/projects/project/storages/cloud-archives/onboarding/onboarding.controller.js

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

packages/manager/modules/pci/src/projects/project/storages/cloud-archives/onboarding/onboarding.html

@@ -0,0 +1,14 @@
+<pci-project-empty guides="$ctrl.guides">
+    <h1 data-translate="pci_projects_project_storages_cloud_archives_onboarding_title"></h1>
+    <p data-translate="pci_projects_project_storages_cloud_archives_onboarding_content1"></p>
+    <strong data-translate="pci_projects_project_storages_cloud_archives_onboarding_content2"></strong>
+    <p data-translate="pci_projects_project_storages_cloud_archives_onboarding_content3"></p>
+    <p data-translate="pci_projects_project_storages_cloud_archives_onboarding_content4"></p>
+
+    <oui-button
+        data-variant="primary"
+        data-on-click="$ctrl.addCloudArchive()">
+        <span data-translate="pci_projects_project_storages_cloud_archives_onboarding_action_label"></span>
+    </oui-button>
+
+</pci-project-empty>

packages/manager/modules/pci/src/projects/project/storages/cloud-archives/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 = 'ovhManagerPciStoragesCloudArchivesOnboarding';
+
+angular
+  .module(moduleName, [
+    empty,
+    'ui.router',
+    'oui',
+    'ngTranslateAsyncLoader',
+    'pascalprecht.translate',
+  ])
+  .config(routing)
+  .component('pciProjectStorageCloudArchivesOnboarding', component)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/modules/pci/src/projects/project/storages/cloud-archives/onboarding/onboarding.routing.js

@@ -0,0 +1,17 @@
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider
+    .state('pci.projects.project.storages.archives.onboarding', {
+      url: '/onboarding',
+      component: 'pciProjectStorageCloudArchivesOnboarding',
+      resolve: {
+        breadcrumb: () => null, // Hide breadcrumb
+        addCloudArchive: /* @ngInject */ ($state, projectId) => () => $state.go('pci.projects.project.storages.archives.add', {
+          projectId,
+        }),
+      },
+      translations: {
+        value: ['.'],
+        format: 'json',
+      },
+    });
+};

packages/manager/modules/pci/src/projects/project/storages/cloud-archives/onboarding/translations/Messages_fr_FR.json

@@ -0,0 +1,11 @@
+{
+  "pci_projects_project_storages_cloud_archives_onboarding_title": "Cloud Archive",
+  "pci_projects_project_storages_cloud_archives_onboarding_content1": "Vous n'avez pas encore créé de service Cloud Archive.",
+  "pci_projects_project_storages_cloud_archives_onboarding_content2": "Archivez vos données sur le long terme et accédez-y par des protocoles standards.",
+  "pci_projects_project_storages_cloud_archives_onboarding_content3": "Cloud Archive permet de conserver vos données dites « froides » sur de longues périodes. Il s’agit d’informations qui n'ont pas besoin d'être consultées régulièrement et qui doivent être gardées pour des raisons métier ou légales. Vous pouvez gérer vos données dans Cloud Archive via les protocoles standards SCP, SFTP et HTTPS, ainsi qu’en utilisant des outils tels que rsync ou le client OpenStack Swift. Pour récupérer vos informations, il suffit de les « réveiller » par une simple requête. Après un délai de quelques minutes à quelques heures, vous pourrez les télécharger.",
+  "pci_projects_project_storages_cloud_archives_onboarding_content4": "Vos données sont sécurisées par l'algorithme Erasure Code, afin de garantir leur pérennité, et vous profitez d'une facturation à l'usage dès le premier Go.",
+  "pci_projects_project_storages_cloud_archives_onboarding_action_label": "Créer un conteneur d'archive",
+
+  "pci_projects_project_storages_cloud_archives_onboarding_guides_retrieve-data-bcp_title": "Récupérer les données provenant de PCA",
+  "pci_projects_project_storages_cloud_archives_onboarding_guides_retrieve-data-bcp_description": ""
+}