Add latest changes from gitlab-org/gitlab@master

1 files changed, 20 insertions, 4 deletions

diff --git a/app/assets/javascripts/alert_management/components/alert_management_table.vue b/app/assets/javascripts/alert_management/components/alert_management_table.vue
index d86b57538ea..924d0c9b234 100644
--- a/app/assets/javascripts/alert_management/components/alert_management_table.vue
+++ b/app/assets/javascripts/alert_management/components/alert_management_table.vue
@@ -44,6 +44,8 @@ const initialPaginationState = {
   lastPageSize: null,
 };
 
+const TWELVE_HOURS_IN_MS = 12 * 60 * 60 * 1000;
+
 export default {
   i18n: {
     noAlertsMsg: s__(
@@ -149,9 +151,20 @@ export default {
       update(data) {
         const { alertManagementAlerts: { nodes: list = [], pageInfo = {} } = {} } =
           data.project || {};
+        const now = new Date();
+
+        const listWithData = list.map(alert => {
+          const then = new Date(alert.startedAt);
+          const diff = now - then;
+
+          return {
+            ...alert,
+            isNew: diff < TWELVE_HOURS_IN_MS,
+          };
+        });
 
         return {
-          list,
+          list: listWithData,
           pageInfo,
         };
       },
@@ -207,9 +220,6 @@ export default {
     hasAlerts() {
       return this.alerts?.list?.length;
     },
-    tbodyTrClass() {
-      return !this.loading && this.hasAlerts ? bodyTrClass : '';
-    },
     showPaginationControls() {
       return Boolean(this.prevPage || this.nextPage);
     },
@@ -290,6 +300,12 @@ export default {
     resetPagination() {
       this.pagination = initialPaginationState;
     },
+    tbodyTrClass(item) {
+      return {
+        [bodyTrClass]: !this.loading && this.hasAlerts,
+        'new-alert': item?.isNew,
+      };
+    },
     handleAlertError(errorMessage) {
       this.errored = true;
       this.errorMessage = errorMessage;