Alerts date fix (#844)

opendatadiscovery · Jul 22, 2022 · 7747f9a · 7747f9a
1 parent 06a8adf
commit 7747f9a
Show file tree

Hide file tree

Showing 14 changed files with 96 additions and 67 deletions.
diff --git a/odd-platform-ui/src/components/Alerts/AlertsList/AlertItem/AlertItem.tsx b/odd-platform-ui/src/components/Alerts/AlertsList/AlertItem/AlertItem.tsx
@@ -2,7 +2,6 @@ import { Typography } from '@mui/material';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { format } from 'date-fns';
-import { Alert } from 'generated-sources';
 import AlertStatusItem from 'components/shared/AlertStatusItem/AlertStatusItem';
 import KebabIcon from 'components/shared/Icons/KebabIcon';
 import EntityClassItem from 'components/shared/EntityClassItem/EntityClassItem';
@@ -11,6 +10,8 @@ import AppTooltip from 'components/shared/AppTooltip/AppTooltip';
 import AppPopover from 'components/shared/AppPopover/AppPopover';
 import AppMenuItem from 'components/shared/AppMenuItem/AppMenuItem';
 import { useAppPaths } from 'lib/hooks';
+import { Alert } from 'redux/interfaces';
+import { alertDateFormat } from 'lib/constants';
 import { ColContainer } from '../AlertsListStyles';
 import * as S from './AlertItemStyles';
 
@@ -24,6 +25,7 @@ const AlertItem: React.FC<AlertItemProps> = ({
   alertStatusHandler,
 }) => {
   const { dataEntityDetailsPath } = useAppPaths();
+
   return (
     <S.Container container>
       <ColContainer
@@ -80,20 +82,14 @@ const AlertItem: React.FC<AlertItemProps> = ({
       </ColContainer>
       <ColContainer item $colType="createdTime">
         <Typography variant="body1">
-          {alert.createdAt &&
-            format(alert.createdAt, 'd MMM yyyy, HH:MM a')}
+          {alert.createdAt && format(alert.createdAt, alertDateFormat)}
         </Typography>
       </ColContainer>
-      <ColContainer item $colType="updatedBy">
-        {/* <Typography variant="body1" noWrap> */}
-        {/*  {alert.statusUpdatedBy?.owner?.name || */}
-        {/*    alert.statusUpdatedBy?.identity.username} */}
-        {/* </Typography> */}
-      </ColContainer>
+      <ColContainer item $colType="updatedBy" />
       <ColContainer item $colType="updatedAt">
         <Typography variant="body1">
           {alert.statusUpdatedAt &&
-            format(alert.statusUpdatedAt, 'd MMM yyyy, HH:MM a')}
+            format(alert.statusUpdatedAt, alertDateFormat)}
         </Typography>
       </ColContainer>
       <ColContainer item $colType="actionBtn">

diff --git a/odd-platform-ui/src/components/Alerts/AlertsList/AlertsList.tsx b/odd-platform-ui/src/components/Alerts/AlertsList/AlertsList.tsx
@@ -103,46 +103,46 @@ const AlertsList: React.FC<AlertsListProps> = ({ fetchAlerts }) => {
         <S.ColContainer item $colType="createdTime">
           <Typography variant="caption">Created at</Typography>
         </S.ColContainer>
-        <S.ColContainer item $colType="updatedBy">
-          {/* <Typography variant="caption">Status updated by</Typography> */}
-        </S.ColContainer>
+        <S.ColContainer item $colType="updatedBy" />
         <S.ColContainer item $colType="updatedAt">
           <Typography variant="caption">Status updated at</Typography>
         </S.ColContainer>
         <S.ColContainer item $colType="actionBtn" />
       </S.AlertsTableHeader>
       <Grid container>
-        <InfiniteScroll
-          dataLength={alerts?.length}
-          next={fetchNextPage}
-          hasMore={!!pageInfo?.hasNext}
-          loader={
-            (isAlertListFetching ||
-              isMyAlertListFetching ||
-              isMyDependentsAlertListFetching) && (
-              <SkeletonWrapper
-                renderContent={({ randomSkeletonPercentWidth, key }) => (
-                  <AlertListSkeleton
-                    width={randomSkeletonPercentWidth()}
-                    key={key}
-                  />
+        <div style={{ width: '100%' }}>
+          <InfiniteScroll
+            dataLength={alerts?.length}
+            next={fetchNextPage}
+            hasMore={!!pageInfo?.hasNext}
+            loader={
+              (isAlertListFetching ||
+                isMyAlertListFetching ||
+                isMyDependentsAlertListFetching) && (
+                <SkeletonWrapper
+                  renderContent={({ randomSkeletonPercentWidth, key }) => (
+                    <AlertListSkeleton
+                      width={randomSkeletonPercentWidth()}
+                      key={key}
+                    />
+                  )}
+                />
+              )
+            }
+            scrollThreshold="200px"
+          >
+            {alerts?.map(alert => (
+              <AlertItem
+                alertStatusHandler={alertStatusHandler(
+                  alert.id,
+                  alert.status
                 )}
+                key={alert.id}
+                alert={alert}
               />
-            )
-          }
-          scrollThreshold="200px"
-        >
-          {alerts?.map(alert => (
-            <AlertItem
-              alertStatusHandler={alertStatusHandler(
-                alert.id,
-                alert.status
-              )}
-              key={alert.id}
-              alert={alert}
-            />
-          ))}
-        </InfiniteScroll>
+            ))}
+          </InfiniteScroll>
+        </div>
       </Grid>
       {(!isAlertListFetching ||
         !isMyAlertListFetching ||

diff --git a/...components/DataEntityDetails/DataEntityAlerts/DataEntityAlertItem/DataEntityAlertItem.tsx b/...components/DataEntityDetails/DataEntityAlerts/DataEntityAlertItem/DataEntityAlertItem.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { Typography } from '@mui/material';
-import { Alert } from 'generated-sources';
 import { format } from 'date-fns';
 import lowerCase from 'lodash/lowerCase';
 import AlertStatusItem from 'components/shared/AlertStatusItem/AlertStatusItem';
 import AppTooltip from 'components/shared/AppTooltip/AppTooltip';
 import AppButton from 'components/shared/AppButton/AppButton';
+import { Alert } from 'redux/interfaces';
+import { alertDateFormat } from 'lib/constants';
 import { ColContainer } from '../DataEntityAlertsStyles';
 import {
   ActionButtonsContainer,
@@ -24,7 +25,7 @@ const DataEntityAlertItem: React.FC<DataEntityAlertItemProps> = ({
   <Container container>
     <ColContainer item $colType="date">
       <Typography variant="body1">
-        {alert.createdAt && format(alert.createdAt, 'd MMM yyyy, HH:MM a')}
+        {alert.createdAt && format(alert.createdAt, alertDateFormat)}
       </Typography>
     </ColContainer>
     <ColContainer item $colType="type">
@@ -51,7 +52,7 @@ const DataEntityAlertItem: React.FC<DataEntityAlertItemProps> = ({
     <ColContainer item $colType="updatedTime">
       <Typography variant="body1">
         {alert.statusUpdatedAt &&
-          format(alert.statusUpdatedAt, 'd MMM yyyy, HH:MM a')}
+          format(alert.statusUpdatedAt, alertDateFormat)}
       </Typography>
     </ColContainer>
     <ActionButtonsContainer item $colType="actionBtn">

diff --git a/odd-platform-ui/src/components/shared/AppTabs/AppTabsStyles.ts b/odd-platform-ui/src/components/shared/AppTabs/AppTabsStyles.ts
@@ -15,7 +15,7 @@ export const TabsContainer = styled(Tabs)<{ $type: TabType }>(
               position: 'absolute',
               content: '""',
               bottom: '0px',
-              width: 'calc(100% - 16px)',
+              width: '100%',
               zIndex: -1,
               borderBottom: '1px solid',
               borderBottomColor: theme.palette.info.light,

diff --git a/odd-platform-ui/src/components/shared/AppToolbar/AppToolbar.tsx b/odd-platform-ui/src/components/shared/AppToolbar/AppToolbar.tsx
@@ -85,7 +85,7 @@ const AppToolbar: React.FC<AppToolbarProps> = ({
 
   React.useEffect(() => {
     const newTabIndex = tabs.findIndex(tab => {
-      if (tab.link === '/activity') {
+      if (tab.link === '/activity' || tab.link === '/alerts') {
         return (
           location.pathname.includes(tab.link) &&
           !location.pathname.includes('dataentities')

diff --git a/odd-platform-ui/src/lib/constants.ts b/odd-platform-ui/src/lib/constants.ts
@@ -21,3 +21,6 @@ export const mainSkeletonHeight = '100%';
 // tabs constants
 export const primaryTabsHeight = 32;
 export const tabsContainerMargin = 16;
+
+// time formats
+export const alertDateFormat = 'd MMM yyyy, HH:mm';
diff --git a/odd-platform-ui/src/lib/helpers.ts b/odd-platform-ui/src/lib/helpers.ts
@@ -42,6 +42,11 @@ export const toDateWithoutOffset = (dateToCast: number): Date => {
   return new Date(date.getTime() - userTimezoneOffset);
 };
 
+export const toTimestampWithoutOffset = (dateToCast: Date): number => {
+  const userTimezoneOffset = dateToCast.getTimezoneOffset() * 60000;
+  return dateToCast.getTime() + userTimezoneOffset;
+};
+
 export const setActivityBackgroundColor = (
   theme: Theme,
   eventType?: CRUDType

diff --git a/odd-platform-ui/src/lib/redux/helpers.ts b/odd-platform-ui/src/lib/redux/helpers.ts
@@ -1,3 +1,5 @@
+import { toTimestampWithoutOffset } from 'lib/helpers';
+
 export const assignWith = <TargetType, SourceType>(
   target: TargetType,
   source: SourceType,
@@ -14,3 +16,22 @@ export const assignWith = <TargetType, SourceType>(
 
 export const createActionType = (actionPrefix: string, action: string) =>
   `${actionPrefix}/${action}`;
+
+export const isDateType = (value: any) =>
+  typeof value === 'object' && value instanceof Date;
+
+export const castItemDatesToTimestampInArray = <Data, RData>(
+  data: Array<Data>
+): Array<RData> =>
+  data.map<RData>(item =>
+    Object.entries(item).reduce<RData>(
+      (memo, [key, value]) =>
+        isDateType(value)
+          ? {
+              ...memo,
+              [key]: toTimestampWithoutOffset(value),
+            }
+          : { ...memo, [key]: value },
+      {} as RData
+    )
+  );
diff --git a/odd-platform-ui/src/redux/interfaces/alerts.ts b/odd-platform-ui/src/redux/interfaces/alerts.ts
@@ -0,0 +1,7 @@
+import { Alert as GeneratedAlert } from 'generated-sources';
+
+export interface Alert
+  extends Omit<GeneratedAlert, 'createdAt' | 'statusUpdatedAt'> {
+  createdAt: number;
+  statusUpdatedAt: number;
+}
diff --git a/odd-platform-ui/src/redux/interfaces/index.ts b/odd-platform-ui/src/redux/interfaces/index.ts
@@ -6,8 +6,8 @@ export * from './datasetStructure';
 export * from './dataQualityTest';
 export * from './common';
 export * from './dataEntityGroup';
-export * from './termGroup';
 export * from './collectors';
 export * from './termSearch';
 export * from './dataentityLineage';
 export * from './activities';
+export * from './alerts';
diff --git a/odd-platform-ui/src/redux/interfaces/state.ts b/odd-platform-ui/src/redux/interfaces/state.ts
@@ -2,7 +2,6 @@ import { EntityState, ThunkAction } from '@reduxjs/toolkit';
 import { ActionType } from 'typesafe-actions';
 import {
   ActivityCountInfo,
-  Alert,
   AlertTotals,
   AppInfo,
   AssociatedOwner,
@@ -37,6 +36,7 @@ import { store } from 'redux/store';
 import {
   Activity,
   ActivityQueryParams,
+  Alert,
   CurrentPageInfo,
   DataEntityDetailsState,
   DataEntityLineageById,

diff --git a/odd-platform-ui/src/redux/interfaces/termGroup.ts b/odd-platform-ui/src/redux/interfaces/termGroup.ts
diff --git a/odd-platform-ui/src/redux/reducers/alerts.slice.ts b/odd-platform-ui/src/redux/reducers/alerts.slice.ts
@@ -1,12 +1,13 @@
 import { AlertsState } from 'redux/interfaces';
-import { Alert } from 'generated-sources';
 import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
 import { alertsActionPrefix } from 'redux/actions';
 
 import * as thunks from 'redux/thunks';
+import { Alert } from 'redux/interfaces/alerts';
 
 export const alertsAdapter = createEntityAdapter<Alert>({
   selectId: alert => alert.id,
+  sortComparer: (a, b) => b.createdAt - a.createdAt,
 });
 
 export const initialState: AlertsState = {

diff --git a/odd-platform-ui/src/redux/thunks/alerts.thunks.ts b/odd-platform-ui/src/redux/thunks/alerts.thunks.ts
@@ -1,5 +1,5 @@
 import {
-  Alert,
+  Alert as GeneratedAlert,
   AlertApi,
   AlertApiChangeAlertStatusRequest,
   AlertApiGetAllAlertsRequest,
@@ -15,7 +15,8 @@ import {
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import * as actions from 'redux/actions';
 import { BASE_PARAMS } from 'lib/constants';
-import { CurrentPageInfo } from 'redux/interfaces';
+import { Alert, CurrentPageInfo } from 'redux/interfaces';
+import { castItemDatesToTimestampInArray } from 'lib/redux/helpers';
 
 const apiClientConf = new Configuration(BASE_PARAMS);
 const alertApi = new AlertApi(apiClientConf);
@@ -28,10 +29,7 @@ export interface AlertsResponse {
 
 export const fetchAlertsTotals = createAsyncThunk<AlertTotals>(
   actions.fetchAlertsTotalsActionType,
-  async () => {
-    const response = await alertApi.getAlertTotals();
-    return response;
-  }
+  async () => alertApi.getAlertTotals()
 );
 
 export const fetchAllAlertList = createAsyncThunk<
@@ -42,8 +40,9 @@ export const fetchAllAlertList = createAsyncThunk<
     page,
     size,
   });
+
   return {
-    items,
+    items: castItemDatesToTimestampInArray<GeneratedAlert, Alert>(items),
     pageInfo: { ...pageInfo, page },
   };
 });
@@ -57,7 +56,7 @@ export const fetchMyAlertList = createAsyncThunk<
     size,
   });
   return {
-    items,
+    items: castItemDatesToTimestampInArray<GeneratedAlert, Alert>(items),
     pageInfo: { ...pageInfo, page },
   };
 });
@@ -71,7 +70,7 @@ export const fetchMyDependentsAlertList = createAsyncThunk<
     size,
   });
   return {
-    items,
+    items: castItemDatesToTimestampInArray<GeneratedAlert, Alert>(items),
     pageInfo: { ...pageInfo, page },
   };
 });
@@ -98,5 +97,8 @@ export const fetchDataEntityAlerts = createAsyncThunk<
   const { items, pageInfo } = await dataEntityApi.getDataEntityAlerts({
     dataEntityId,
   });
-  return { items, pageInfo };
+  return {
+    items: castItemDatesToTimestampInArray<GeneratedAlert, Alert>(items),
+    pageInfo,
+  };
 });