Feat/dedicated listing page

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

@@ -41,7 +41,9 @@ import ovhNotificationsSidebar from '@ovh-ux/manager-notifications-sidebar';
 
 import cloudUniverseComponents from '../cloudUniverseComponents';
 
+import cda from './cda';
 import errorPage from './error/error.module';
+import metrics from './dbaas/dbaas-metrics';
 
 Environment.setRegion(__WEBPACK_REGION__);
 
@@ -112,7 +114,9 @@ angular
       ovhManagerBanner,
       ovhManagerNavbar,
       ovhManagerServerSidebar,
+      cda,
       errorPage,
+      metrics,
       __NG_APP_INJECTIONS__,
     ].filter(isString),
   )

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,23 @@
+import angular from 'angular';
+import 'angular-translate';
+import '@ovh-ux/ui-kit';
+import '@uirouter/angularjs';
+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,
+    'ui.router',
+  ])
+  .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;

packages/manager/apps/cloud/client/app/dbaas/dbaas-metrics/index.js

@@ -0,0 +1,35 @@
+import angular from 'angular';
+import '@uirouter/angularjs';
+import 'oclazyload';
+
+const moduleName = 'ovhManagerMetricsLazyLoading';
+
+angular.module(moduleName, ['ui.router', 'oc.lazyLoad']).config(
+  /* @ngInject */ ($stateProvider) => {
+    $stateProvider
+      .state('dbaas.metrics', {
+        url: '/metrics',
+        views: {
+          dbaasContainer: {
+            templateUrl: 'app/dbaas/dbaas-metrics/metrics.html',
+          },
+        },
+        abstract: true,
+        translations: {
+          value: ['.'],
+          format: 'json',
+        },
+      })
+      .state('dbaas.metrics.index.**', {
+        url: '',
+        lazyLoad: ($transition$) => {
+          const $ocLazyLoad = $transition$.injector().get('$ocLazyLoad');
+
+          return import('./metrics/metrics.module').then((mod) =>
+            $ocLazyLoad.inject(mod.default || mod),
+          );
+        },
+      });
+  },
+);
+export default moduleName;

packages/manager/apps/cloud/client/app/dbaas/dbaas-metrics/metrics.js

@@ -6,19 +6,6 @@ angular.module('managerApp').config(($stateProvider) => {
   };
 
   $stateProvider
-    .state('dbaas.metrics', {
-      url: '/metrics',
-      views: {
-        dbaasContainer: {
-          templateUrl: 'app/dbaas/dbaas-metrics/metrics.html',
-        },
-      },
-      abstract: true,
-      translations: {
-        value: ['.'],
-        format: 'json',
-      },
-    })
     .state('dbaas.metrics.detail', {
       url: '/{serviceName}',
       views: {

packages/manager/apps/cloud/client/app/dbaas/dbaas-metrics/metrics/metrics.module.js

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

packages/manager/apps/cloud/client/app/dbaas/dbaas-metrics/metrics/metrics.routing.js

@@ -0,0 +1,26 @@
+import { ListLayoutHelper } from '@ovh-ux/manager-ng-layout-helpers';
+
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('dbaas.metrics.index', {
+    url: `?${ListLayoutHelper.urlQueryParams}`,
+    views: {
+      dbaasContainer: {
+        component: 'managerListLayout',
+      },
+    },
+    params: ListLayoutHelper.stateParams,
+    resolve: {
+      ...ListLayoutHelper.stateResolves,
+      apiPath: () => '/metrics',
+      dataModel: () => 'metrics.api.Service',
+      defaultFilterColumn: () => 'name',
+      header: /* @ngInject */ ($translate) =>
+        $translate.instant('dbaas_metrics_title'),
+      customizableColumns: () => true,
+      getServiceNameLink: /* @ngInject */ ($state) => ({ name: serviceName }) =>
+        $state.href('dbaas.metrics.detail', {
+          serviceName,
+        }),
+    },
+  });
+};

packages/manager/apps/cloud/client/app/dbaas/dbaas-metrics/metrics/translations/Messages_fr_FR.json

@@ -0,0 +1,3 @@
+{
+  "dbaas_metrics_title": "Metrics"
+}

packages/manager/apps/cloud/package.json

@@ -29,6 +29,7 @@
     "@ovh-ux/manager-error-page": "^1.0.0 || ^2.0.0",
     "@ovh-ux/manager-navbar": "^4.0.0 || ^5.0.0",
     "@ovh-ux/manager-notifications-sidebar": "^0.0.0 || ^1.0.0",
+    "@ovh-ux/manager-ng-layout-helpers": "^1.1.0 || ^2.0.0",
     "@ovh-ux/manager-server-sidebar": "^1.0.0 || ^2.0.0",
     "@ovh-ux/ng-at-internet": "^5.1.0",
     "@ovh-ux/ng-at-internet-ui-router-plugin": "^3.1.0",
@@ -113,6 +114,7 @@
     "moment": "^2.19",
     "moment-duration-format": "^1.3",
     "ng-slide-down": "TheRusskiy/ng-slide-down#^1.0.0",
+    "oclazyload": "^1.1.0",
     "office-ui-fabric-core": "^11.0.0",
     "ovh-angular-list-view": "ovh-ux/ovh-angular-list-view#^0.1.5",
     "ovh-api-services": "^9.49.0",
@@ -131,4 +133,4 @@
     "webpack": "^4.41.2",
     "webpack-merge": "^4.1.4"
   }
-}
+}

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

@@ -46,8 +46,10 @@ import ovhManagerIplb from '@ovh-ux/manager-iplb';
 import { detach as detachPreloader } from '@ovh-ux/manager-preloader';
 import ovhNotificationsSidebar from '@ovh-ux/manager-notifications-sidebar';
 import account from './account';
+import cdn from './cdn';
 import config from './config/config';
 import contactsService from './account/contacts/service/contacts-service.module';
+import dedicatedCloud from './dedicatedCloud';
 import dedicatedCloudDatacenterDrp from './dedicatedCloud/datacenter/drp';
 import dedicatedCloudDatacenterDashboardDeleteDrp from './dedicatedCloud/datacenter/dashboard/deleteDrp';
 import dedicatedUniverseComponents from './dedicatedUniverseComponents';
@@ -56,6 +58,7 @@ import ovhManagerPccDashboard from './dedicatedCloud/dashboard';
 import ovhManagerPccResourceUpgrade from './dedicatedCloud/resource/upgrade';
 
 import dedicatedServer from './dedicated/server';
+import dedicatedNas from './dedicated/nas';
 
 import datacenterBackup from './dedicatedCloud/datacenter/backup';
 import userContracts from './user-contracts';
@@ -75,10 +78,13 @@ angular
       'Billing',
       chartjs,
       'controllers',
+      cdn,
       contactsService,
       datacenterBackup,
+      dedicatedCloud,
       dedicatedCloudDatacenterDrp,
       dedicatedCloudDatacenterDashboardDeleteDrp,
+      dedicatedNas,
       dedicatedServer,
       dedicatedUniverseComponents,
       'directives',

packages/manager/apps/dedicated/client/app/cdn/cdn.bundle.js

@@ -1,4 +1,3 @@
-import './cdn.routes';
 import './dedicated/backend/order/cdn-dedicated-backend-order.controller';
 import './dedicated/cdn-dedicated.controller';
 import './dedicated/cdn-dedicated.routes';

packages/manager/apps/dedicated/client/app/cdn/cdn.module.js

@@ -0,0 +1,14 @@
+import angular from 'angular';
+import '@ovh-ux/ui-kit';
+import '@uirouter/angularjs';
+import { ListLayoutHelper } from '@ovh-ux/manager-ng-layout-helpers';
+
+import routing from './cdn.routes';
+
+const moduleName = 'ovhManagerCdn';
+
+angular
+  .module(moduleName, ['oui', ListLayoutHelper.moduleName, 'ui.router'])
+  .config(routing);
+
+export default moduleName;

packages/manager/apps/dedicated/client/app/cdn/cdn.routes.js

@@ -1,8 +1,23 @@
-angular.module('App').config(($stateProvider) => {
-  $stateProvider.state('app.networks.cdn', {
-    url: '',
-    template: '<div data-ui-view></div>',
-    abstract: true,
-    reloadOnSearch: false,
+import { ListLayoutHelper } from '@ovh-ux/manager-ng-layout-helpers';
+
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('app.networks.cdn.index', {
+    url: `/cdn?${ListLayoutHelper.urlQueryParams}`,
+    component: 'managerListLayout',
+    params: ListLayoutHelper.stateParams,
+    resolve: {
+      ...ListLayoutHelper.stateResolves,
+      apiPath: () => '/cdn/dedicated',
+      dataModel: () => 'cdnanycast.Anycast',
+      defaultFilterColumn: () => 'service',
+      header: () => 'CDN',
+      customizableColumns: () => true,
+      getServiceNameLink: /* @ngInject */ ($state) => ({
+        service: productId,
+      }) =>
+        $state.href('app.networks.cdn.dedicated', {
+          productId,
+        }),
+    },
   });
-});
+};

packages/manager/apps/dedicated/client/app/cdn/dedicated/manage/cdn-dedicated-manage.controller.js

@@ -1,14 +1,23 @@
 angular.module('App').controller(
   'CdnManageCtrl',
   class CdnManageCtrl {
-    constructor($scope, $q, $stateParams, $filter, $translate, Cdn) {
+    constructor(
+      $scope,
+      $q,
+      $stateParams,
+      $filter,
+      $translate,
+      Cdn,
+      goToDomains,
+    ) {
       // injections
       this.$scope = $scope;
       this.$q = $q;
       this.$stateParams = $stateParams;
       this.$filter = $filter;
       this.$translate = $translate;
       this.Cdn = Cdn;
+      this.goToDomains = goToDomains;
 
       // attributes used in view
       this.cdn = null;

packages/manager/apps/dedicated/client/app/cdn/dedicated/manage/cdn-dedicated-manage.html

@@ -18,6 +18,9 @@
             <oui-header-tabs-item state="app.networks.cdn.dedicated.manage.logs"
                 ><span data-translate="cdn_tab_logs"></span
             ></oui-header-tabs-item>
+            <oui-header-tabs-item on-click="$ctrl.goToDomains()"
+                ><span data-translate="cdn_tab_domains"></span
+            ></oui-header-tabs-item>
         </oui-header-tabs>
     </oui-header>