feat(dedicated.occ): add notifications on occ dashboard

ref: MANAGER-15325

Signed-off-by: Quentin Pavy <[email protected]>

packages/manager/modules/cloud-connect/src/cloud-connect.service.js

@@ -559,4 +559,12 @@ export default class CloudConnectService {
       `cloud_connect_common_${array[array.length - 1]}`,
     )}`;
   }
+
+  getNotifications(cloudConnectId) {
+    return this.iceberg(`/ovhCloudConnect/${cloudConnectId}/incident`)
+      .query()
+      .expand('CachedObjectList-Pages')
+      .execute(null, true)
+      .$promise.then(({ data }) => data);
+  }
 }

packages/manager/modules/cloud-connect/src/details/components/notifications/component.js

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

packages/manager/modules/cloud-connect/src/details/components/notifications/constants.js

@@ -0,0 +1,8 @@
+export const NOTIFICATION_TYPE = {
+  INCIDENT: 'incident',
+  MAINTENANCE: 'maintenance',
+};
+
+export default {
+  NOTIFICATION_TYPE,
+};

packages/manager/modules/cloud-connect/src/details/components/notifications/controller.js

@@ -0,0 +1,67 @@
+import { NOTIFICATION_TYPE } from './constants';
+
+export default class NotificationsController {
+  /* @ngInject */
+  constructor(coreConfig) {
+    this.incident = undefined;
+    this.maintenances = [];
+
+    this.dateTimeFormat = new Intl.DateTimeFormat(
+      coreConfig.getUserLocale().replace('_', '-'),
+      {
+        day: 'numeric',
+        month: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        timeZoneName: 'short',
+      },
+    );
+  }
+
+  $onInit() {
+    // If there is incident, display the incident with the earlier date time
+    this.incident = this.notifications
+      .filter(
+        (notification) => notification.type === NOTIFICATION_TYPE.INCIDENT,
+      )
+      .reduce((earliestIncident, currentIncident) => {
+        const currentIncidentFormatted = {
+          ...currentIncident,
+          startDateFormatted: this.dateTimeFormat.format(
+            new Date(currentIncident.startDate),
+          ),
+        };
+
+        if (!earliestIncident) {
+          return currentIncidentFormatted;
+        }
+
+        if (currentIncident.startDate < earliestIncident.startDate) {
+          return currentIncidentFormatted;
+        }
+
+        return earliestIncident;
+      }, null);
+
+    // Sort all maintenances with the earlier start date time first
+    this.maintenances = this.notifications
+      .filter(
+        (notification) => notification.type === NOTIFICATION_TYPE.MAINTENANCE,
+      )
+      .sort(
+        (maintenanceA, maintenanceB) =>
+          new Date(maintenanceA.startDate) - new Date(maintenanceB.startDate),
+      )
+      .map((maintenance) => ({
+        ...maintenance,
+        startDateFormatted: this.dateTimeFormat.format(
+          new Date(maintenance.startDate),
+        ),
+        endDateFormatted: this.dateTimeFormat.format(
+          new Date(maintenance.endDate),
+        ),
+      }));
+  }
+}

packages/manager/modules/cloud-connect/src/details/components/notifications/index.js

@@ -0,0 +1,13 @@
+import angular from 'angular';
+import 'angular-translate';
+
+import component from './component';
+
+const moduleName = 'ovhCloudConnectDetailsNotificationsModule';
+
+angular
+  .module(moduleName, ['pascalprecht.translate'])
+  .component('ovhCloudConnectNotifications', component)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;

packages/manager/modules/cloud-connect/src/details/components/notifications/template.html

@@ -0,0 +1,20 @@
+<div id="ovh-cloud-connect-notifications">
+    <oui-message data-type="warning" data-ng-if="$ctrl.incident" class="mb-2">
+        <span
+            data-translate="cloud_connect_notifications_incident"
+            data-translate-values="{startDate: $ctrl.incident.startDateFormatted}"
+        ></span>
+    </oui-message>
+
+    <oui-message
+        data-type="info"
+        data-ng-if="$ctrl.maintenances.length !== 0"
+        data-ng-repeat="maintenance in $ctrl.maintenances"
+        class="mb-2"
+    >
+        <span
+            data-translate="cloud_connect_notifications_maintenance"
+            data-translate-values="{startDate: maintenance.startDateFormatted, endDate: maintenance.endDateFormatted}"
+        ></span>
+    </oui-message>
+</div>

packages/manager/modules/cloud-connect/src/details/components/notifications/translations/Messages_fr_FR.json

@@ -0,0 +1,4 @@
+{
+  "cloud_connect_notifications_incident": "Un incident pouvant impacter votre service a été déclaré le {{startDate}}",
+  "cloud_connect_notifications_maintenance": "Une opération de maintenance est prévue du {{startDate}} au {{endDate}}"
+}

packages/manager/modules/cloud-connect/src/details/details.component.js

@@ -5,6 +5,7 @@ export default {
     cloudConnect: '<',
     guideUrl: '<',
     clearCache: '<',
+    notifications: '<',
   },
   template,
 };

packages/manager/modules/cloud-connect/src/details/details.module.js

@@ -8,6 +8,7 @@ import routing from './details.routing';
 import serviceKeys from './service-keys';
 import tasks from './tasks';
 import statistics from './statistics';
+import notifications from './components/notifications';
 
 const moduleName = 'ovhCloudConnectDetails';
 
@@ -19,6 +20,7 @@ angular
     serviceKeys,
     tasks,
     statistics,
+    notifications,
   ])
   .config(routing)
   .component('cloudConnectDetails', component)

packages/manager/modules/cloud-connect/src/details/details.routing.js

@@ -15,6 +15,8 @@ export default /* @ngInject */ ($stateProvider) => {
       clearCache: /* @ngInject */ (cloudConnectService) => () =>
         cloudConnectService.clearAllCache(),
       breadcrumb: /* @ngInject */ (cloudConnectId) => cloudConnectId,
+      notifications: /* @ngInject */ (cloudConnectId, cloudConnectService) =>
+        cloudConnectService.getNotifications(cloudConnectId),
     },
   });
 };

packages/manager/modules/cloud-connect/src/details/template.html

@@ -28,4 +28,7 @@
         </oui-header-tabs-item>
     </oui-header-tabs>
 </oui-header>
+<ovh-cloud-connect-notifications
+    data-notifications="$ctrl.notifications"
+></ovh-cloud-connect-notifications>
 <div data-ui-view></div>