feat(cda): add listing page

Signed-off-by: Marie JONES <marie.jones@corp.ovh.com>

packages/manager/apps/cloud/client/app/app.js

@@ -39,6 +39,7 @@ import ovhManagerServerSidebar from '@ovh-ux/manager-server-sidebar';
 
 import cloudUniverseComponents from '../cloudUniverseComponents';
 
+import cda from './cda';
 import errorPage from './error/error.module';
 import metrics from './dbaas/dbaas-metrics';
 
@@ -109,6 +110,7 @@ angular
       ovhManagerBanner,
       ovhManagerNavbar,
       ovhManagerServerSidebar,
+      cda,
       errorPage,
       metrics,
       __NG_APP_INJECTIONS__,

packages/manager/apps/cloud/client/app/cda/cda.js

@@ -1,18 +1,5 @@
-angular
-  .module('managerApp')
-  .config(($stateProvider) => {
-    $stateProvider.state('paas.cda', {
-      url: '/cda',
-      template: '<div data-ui-view="cdaDetails"></div>',
-      translations: {
-        format: 'json',
-        value: ['.'],
-      },
-      abstract: true,
-    });
-  })
-  .run(($transitions, CdaService) => {
-    $transitions.onSuccess({ to: 'paas.cda.**' }, (transition) => {
-      CdaService.initDetails(transition.params().serviceName);
-    });
+angular.module('managerApp').run(($transitions, CdaService) => {
+  $transitions.onSuccess({ to: 'paas.cda.**' }, (transition) => {
+    CdaService.initDetails(transition.params().serviceName);
   });
+});

packages/manager/apps/cloud/client/app/cda/cda/cda.module.js

@@ -0,0 +1,21 @@
+import angular from 'angular';
+import 'angular-translate';
+import '@ovh-ux/ui-kit';
+import ngTranslateAsyncLoader from '@ovh-ux/ng-translate-async-loader';
+import { ListLayoutHelper } from '@ovh-ux/manager-ng-layout-helpers';
+
+import routing from './cda.routing';
+
+const moduleName = 'ovhManagerCephCluster';
+
+angular
+  .module(moduleName, [
+    ngTranslateAsyncLoader,
+    'oui',
+    'pascalprecht.translate',
+    ListLayoutHelper.moduleName,
+  ])
+  .config(routing)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/apps/cloud/client/app/cda/cda/cda.routing.js

@@ -0,0 +1,25 @@
+import { ListLayoutHelper } from '@ovh-ux/manager-ng-layout-helpers';
+
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('paas.cda.index', {
+    url: `?${ListLayoutHelper.urlQueryParams}`,
+    views: {
+      cdaDetails: {
+        component: 'managerListLayout',
+      },
+    },
+    params: ListLayoutHelper.stateParams,
+    resolve: {
+      ...ListLayoutHelper.stateResolves,
+      apiPath: () => '/dedicated/ceph',
+      dataModel: () => 'dedicated.ceph.clusterGet.response',
+      defaultFilterColumn: () => 'serviceName',
+      header: /* @ngInject */ ($translate) => $translate.instant('cda_title'),
+      customizableColumns: () => true,
+      getServiceNameLink: /* @ngInject */ ($state) => ({ serviceName }) =>
+        $state.href('paas.cda.cda-details', {
+          serviceName,
+        }),
+    },
+  });
+};

packages/manager/apps/cloud/client/app/cda/cda/translations/Messages_fr_FR.json

@@ -0,0 +1,3 @@
+{
+  "cda_title": "Ceph cluster"
+}

packages/manager/apps/cloud/client/app/cda/details/cda-details.js

@@ -1,6 +1,7 @@
 angular.module('managerApp').config(($stateProvider) => {
   $stateProvider.state('paas.cda.cda-details', {
     url: '/{serviceName}',
+    redirectTo: 'paas.cda.cda-details.cda-details-home',
     views: {
       cdaDetails: {
         templateUrl: 'app/cda/details/cda-details.html',

packages/manager/apps/cloud/client/app/cda/index.js

@@ -0,0 +1,31 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName = 'ovhManagerCephClusterLazyLoading';
+
+angular.module(moduleName, ['ui.router', 'oc.lazyLoad']).config(
+  /* @ngInject */ ($stateProvider) => {
+    $stateProvider
+      .state('paas.cda', {
+        url: '/cda',
+        template: '<div data-ui-view="cdaDetails"></div>',
+        translations: {
+          format: 'json',
+          value: ['.'],
+        },
+        abstract: true,
+      })
+      .state('paas.cda.index.**', {
+        url: '',
+        lazyLoad: ($transition$) => {
+          const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+
+          return import('./cda/cda.module').then((mod) =>
+            $ocLazyLoad.inject(mod.default || mod),
+          );
+        },
+      });
+  },
+);
+export default moduleName;