Skip to content

Commit

Permalink
feat: add timezone support to ingestion settings list page and alerts…
Browse files Browse the repository at this point in the history
… page when groupe filter is applied (#6570)

* feat: add timezone support to triggered alerts page when groupe filter is applied

* feat: apply timezone adjustment to ingestion settings
  • Loading branch information
ahmadshaheer authored Dec 3, 2024
1 parent 0a21911 commit 75b6735
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import { AxiosError } from 'axios';
import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
import Tags from 'components/Tags/Tags';
import { SOMETHING_WENT_WRONG } from 'constants/api';
import dayjs, { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionKeys';
import useDebouncedFn from 'hooks/useDebouncedFunction';
import { useNotifications } from 'hooks/useNotifications';
Expand All @@ -51,6 +51,7 @@ import {
Trash2,
X,
} from 'lucide-react';
import { useTimezone } from 'providers/Timezone';
import { ChangeEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useMutation } from 'react-query';
Expand All @@ -70,7 +71,10 @@ const { Option } = Select;

const BYTES = 1073741824;

export const disabledDate = (current: Dayjs): boolean =>
// Using any type here because antd's DatePicker expects its own internal Dayjs type
// which conflicts with our project's Dayjs type that has additional plugins (tz, utc etc).
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
export const disabledDate = (current: any): boolean =>
// Disable all dates before today
current && current < dayjs().endOf('day');

Expand Down Expand Up @@ -393,8 +397,11 @@ function MultiIngestionSettings(): JSX.Element {

const gbToBytes = (gb: number): number => Math.round(gb * 1024 ** 3);

const getFormattedTime = (date: string): string =>
dayjs(date).format('MMM DD,YYYY, hh:mm a');
const getFormattedTime = (
date: string,
formatTimezoneAdjustedTimestamp: (date: string, format: string) => string,
): string =>
formatTimezoneAdjustedTimestamp(date, 'MMM DD,YYYY, hh:mm a (UTC Z)');

const showDeleteLimitModal = (
APIKey: IngestionKeyProps,
Expand Down Expand Up @@ -544,17 +551,27 @@ function MultiIngestionSettings(): JSX.Element {
}
};

const { formatTimezoneAdjustedTimestamp } = useTimezone();

const columns: AntDTableProps<IngestionKeyProps>['columns'] = [
{
title: 'Ingestion Key',
key: 'ingestion-key',
// eslint-disable-next-line sonarjs/cognitive-complexity
render: (APIKey: IngestionKeyProps): JSX.Element => {
const createdOn = getFormattedTime(APIKey.created_at);
const createdOn = getFormattedTime(
APIKey.created_at,
formatTimezoneAdjustedTimestamp,
);
const formattedDateAndTime =
APIKey && APIKey?.expires_at && getFormattedTime(APIKey?.expires_at);
APIKey &&
APIKey?.expires_at &&
getFormattedTime(APIKey?.expires_at, formatTimezoneAdjustedTimestamp);

const updatedOn = getFormattedTime(APIKey?.updated_at);
const updatedOn = getFormattedTime(
APIKey?.updated_at,
formatTimezoneAdjustedTimestamp,
);

const limits: { [key: string]: LimitProps } = {};

Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Tag, Typography } from 'antd';
import convertDateToAmAndPm from 'lib/convertDateToAmAndPm';
import getFormattedDate from 'lib/getFormatedDate';
import { useTimezone } from 'providers/Timezone';
import { Alerts } from 'types/api/alerts/getTriggered';

import Status from '../TableComponents/AlertStatus';
import { TableCell, TableRow } from './styles';

function ExapandableRow({ allAlerts }: ExapandableRowProps): JSX.Element {
const { formatTimezoneAdjustedTimestamp } = useTimezone();
return (
<>
{allAlerts.map((alert) => {
Expand Down Expand Up @@ -40,8 +40,9 @@ function ExapandableRow({ allAlerts }: ExapandableRowProps): JSX.Element {
</TableCell>

<TableCell>
<Typography>{`${getFormattedDate(formatedDate)} ${convertDateToAmAndPm(
<Typography>{`${formatTimezoneAdjustedTimestamp(
formatedDate,
'MM/DD/YYYY hh:mm:ss A (UTC Z)',
)}`}</Typography>
</TableCell>

Expand Down

0 comments on commit 75b6735

Please sign in to comment.