mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-10-16 07:51:28 +08:00

* feat: tabs and filters for alert history page (#5655) * feat: alert history page route and component setup * feat: alert history basic tabs and fitlers UI * feat: route based tabs for alert history and overview and improve the UI to match designs * chore: unused components and files cleanup * chore: improve alert history and overview route paths * chore: use parent selector in scss files * chore: alert -> alerts * feat: alert rule details metadata header (#5675) * feat: alert history basic tabs and fitlers UI * feat: route based tabs for alert history and overview and improve the UI to match designs * chore: unused components and files cleanup * feat: copy to clipboard component * feat: see more component * feat: key value label component * feat: alert rule details meta data header * fix: apply the missing changes * chore: uncomment the alert status with static data * chore: compress the alert status svg icons and define props, types, and defaultProps * feat: alert rule history skeleton using static data (#5688) * feat: alert history basic tabs and fitlers UI * feat: route based tabs for alert history and overview and improve the UI to match designs * feat: top contributors UI using static data * feat: avg. resolution time and total triggered stats card UI using static data * feat: tabs component * feat: timeline tabs and filters * feat: overall status graph UI using dummy data with graph placeholder * feat: timeline table and pagination UI using dummy data * fix: bugfix in reset tabs * feat: add popover to go to logs/traces to top contributors and timeline table * chore: remove comments * chore: rename AlertIcon to AlertState * fix: add cursor pointer to timeline table rows * feat: add parent tabs to alert history * chore: add icon to the configure tab * fix: display popover on hovering the more button in see more component * fix: wrap key value label * feat: alert rule history enable/disable toggle UI * Feat: get alert history data from API (#5718) * feat: alert history basic tabs and fitlers UI * feat: route based tabs for alert history and overview and improve the UI to match designs * feat: data state renderer component * feat: get total triggered and avg. resolution cards data from API * fix: hide stats card if we get NaN * chore: improve rule stats types * feat: get top contributors data from API * feat: get timeline table data from API * fix: properly render change percentage indicator * feat: total triggered and avg resolution empty states * fix: fix stats height issue that would cause short border-right in empty case * feat: top contributors empty state * fix: fix table and graph borders * feat: build alert timeline labels filter and handle client side filtering * fix: select the first tab on clicking reset * feat: set param and send in payload on clicking timeline filter tabs * Feat: alert history timeline remaining subtasks except graphs (#5720) * feat: alert history basic tabs and fitlers UI * feat: route based tabs for alert history and overview and improve the UI to match designs * feat: implement timeline table sorting * chore: add initial count to see more and alert labels * chore: move PaginationInfoText component to /periscope * chore: implement top contributor rows using Ant Table * feat: top contributors view all * fix: hide border for last row and prevent layout shift in top contributors by specifying height * feat: properly display duration in average resolution time * fix: properly display normal alert rule state * feat: add/remove view all top contributors param to url on opening/closing view all * feat: calculate start and end time from relative time and add/remove param to url * fix: fix console warnings * fix: enable timeline table query only if start and end times exist * feat: handle enable/disable alert rule toggle request * chore: replace string values with constants * fix: hide stats card if only past data is available + remove unnecessary states from AlertState * fix: redirect configure alert rule to alert overview tab * fix: display total triggers in timeline chart wrapper based on API response data * fix: choosing the same relative time doesn't udpate start and end time * Feat: total triggered and avg. resolution time graph (#5750) * feat: alert history basic tabs and fitlers UI * feat: route based tabs for alert history and overview and improve the UI to match designs * feat: handle enable/disable alert rule toggle request * feat: stats card line chart * fix: overall improvements to stats card graph * fix: overall UI improvements to match the Figma screens * chore: remove duplicate hook * fix: make the changes w.r.t timeline table API changes to prevent breaking the page * fix: update stats card null check based on updated API response * feat: stats card no previous data UI * feat: redirect to 404 page if rule id is invalid * chore: improve alert enable toggle success toast message * feat: get top contributors row and timeline table row related logs and traces links from API * feat: get total items from API and make pagination work * feat: implement timeline filters based on API response * fix: in case of current and target units, convert the value unit in timeline table * fix: timeline table y axis unit null check * fix: hide stats card graph if only a single entry is there in timeseries * chore: redirect alert from all alerts to overview tab * fix: prevent adding extra unnecessary params on clicking alerts top level tabs * chore: use conditional alert popover in timeline table and import the scss file * fix: prevent infinity if we receive totalPastTriggers as '0' * fix: improve UI to be pixel perfect based on figma designs * fix: fix the incorrect change direction * fix: add height to top contributors row * feat: alert history light mode * fix: remove the extra padding from alert overview query builder tabs * chore: overall improvements * chore: remove mock file * fix: overall improvements * fix: add dark mode support for top contributors empty state * chore: improve timeline chart placeholder bg in light mode * Feat: alert history horizontal timeline chart (#5773) * feat: timeline horizontal chart * fix: remove the labels from horizontal timeline chart * chore: add null check to timeline chart * chore: hide cursor from timeline chart * fix: fix the blank container being displayed in loading state * fix: alert history UI fixes (#5776) * fix: remove extra padding from alert overview query section tabs * fix: add padding to alert overview container * fix: improve breadcrumb click behavior * chore: temporarily hide reset button from alert details timepicker * fix: improve breadcrumb click behavior * chore: hide alert firing since * fix: don't use the data state renderer for timeline table * fix: alert history pr review changes (#5778) * chore: rename alert history scss files in pascal case * fix: use proper variables * chore: use color variable for action button dropdown item * chore: improve the directory structure for alert history components * chore: move inline style to scss file and extract dropdown renderer component * chore: use colors from Color instead of css variables inside tsx files * chore: return null in default case * chore: update alert details spinner tip * chore: timelinePlugin warnings and remove file wide warning disabling * chore: change Arial to Geist Mono in timeline plugin * feat: alert history remaining feats (#5825) * fix: add switch case for inactive state to alert state component * feat: add API enabled label search similar to Query Builder * feat: add reset button to date and time picker * feat: add vertical timeline chart using static data * chore: use Colors instead of hex + dummy data for 90 days * fix: label search light mode UI * fix: remove placeholder logic, and display vertical charts if more than 1 day * chore: extract dayjs manipulate types to a constant * fix: hide the overflow of top contributors card * fix: throw instead of return error to prevent breaking alert history page in case of error * chore: temporarily comment alert history vertical charts * chore: calculate start and end times from relative time and remove query params (#5828) * chore: calculate start and end times from relative time and remove query params * fix: hide reset button if selected time is 30m * feat: alert history dropdown functionality (#5833) * feat: alert history dropdown actions * chore: use query keys from react query key constant * fix: properly handle error states for alert rule APIs * fix: handle dropdown state using onOpenChange to fix clicking delete not closing the dropdown * Fix: bugfixes and overall improvements to alert history (#5841) * fix: don't display severity label * chore: remove id from alert header * chore: add tooltip to enable/disable alert toggle * chore: update enable/disbale toast message * fix: set default relative time to 6h if relative time is not provided * chore: update empty top contributors text and remove configure alert * chore: temporarily hide value column from timeline column * fix: use correct links for logs and traces in alert popover * fix: properly set timeline table offset * fix: display all values in graph * fix: resolve conflicts * chore: remove style for value column in timeline table * chore: temporarily hide labels search * fix: incorrect current page in pagination info text * chore: remove label QB search * chore: remove value column * chore: remove commented code * fix: show traces button when trace link is available * fix: display horizontal chart even for a single entry * fix: show inactive state in horizontal similar to normal state * fix: properly render inactive state in horizontal chart * fix: properly handle preserving alert toggle between overview and history tabs * feat: get page size from query param * chore: remove commented code + minor refactor * chore: remove tsconfi.tmp * fix: don't add default relative time if start and times exist in the url * feat: display date range preview for stat cards * chore: remove custom dropdown renderer component * Fix: UI feedback changes (#5852) * fix: add divider before delete button * fix: timeline section title color in lightmode * fix: remove the extra border from alert history tabs * fix: populate alert rule disabled state on toggling alert state (#5854) --------- Co-authored-by: Shaheer Kochai <ashaheerki@gmail.com>
128 lines
3.6 KiB
TypeScript
128 lines
3.6 KiB
TypeScript
import dayjs from 'dayjs';
|
|
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
|
import duration from 'dayjs/plugin/duration';
|
|
|
|
dayjs.extend(customParseFormat);
|
|
|
|
dayjs.extend(duration);
|
|
|
|
export function toUTCEpoch(time: number): number {
|
|
const x = new Date();
|
|
return time + x.getTimezoneOffset() * 60 * 1000;
|
|
}
|
|
|
|
export const getFormattedDate = (epochTimestamp: number): string => {
|
|
// Convert epoch timestamp to a date
|
|
const date = dayjs.unix(epochTimestamp);
|
|
|
|
// Format the date as "18 Nov 2013"
|
|
return date.format('DD MMM YYYY');
|
|
};
|
|
|
|
export const getRemainingDays = (billingEndDate: number): number => {
|
|
// Convert Epoch timestamps to Date objects
|
|
const startDate = new Date(); // Convert seconds to milliseconds
|
|
const endDate = new Date(billingEndDate * 1000); // Convert seconds to milliseconds
|
|
|
|
// Calculate the time difference in milliseconds
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
const timeDifference = endDate - startDate;
|
|
|
|
return Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
|
|
};
|
|
|
|
/**
|
|
* Calculates the duration from the given epoch timestamp to the current time.
|
|
*
|
|
*
|
|
* @param {number} epochTimestamp
|
|
* @returns {string} - human readable string representing the duration from the given epoch timestamp to the current time e.g. "3d 14h"
|
|
*/
|
|
export const getDurationFromNow = (epochTimestamp: number): string => {
|
|
const now = dayjs();
|
|
const inputTime = dayjs(epochTimestamp);
|
|
const duration = dayjs.duration(now.diff(inputTime));
|
|
|
|
const days = duration.days();
|
|
const hours = duration.hours();
|
|
const minutes = duration.minutes();
|
|
const seconds = duration.seconds();
|
|
|
|
let result = '';
|
|
if (days > 0) result += `${days}d `;
|
|
if (hours > 0) result += `${hours}h `;
|
|
if (minutes > 0) result += `${minutes}m `;
|
|
if (seconds > 0) result += `${seconds}s`;
|
|
|
|
return result.trim();
|
|
};
|
|
|
|
/**
|
|
* Formats an epoch timestamp into a human-readable date and time string.
|
|
*
|
|
* @param {number} epoch - The epoch timestamp to format.
|
|
* @returns {string} - The formatted date and time string in the format "MMM D, YYYY ⎯ HH:MM:SS".
|
|
*/
|
|
export function formatEpochTimestamp(epoch: number): string {
|
|
const date = new Date(epoch);
|
|
|
|
const optionsDate: Intl.DateTimeFormatOptions = {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
};
|
|
|
|
const optionsTime: Intl.DateTimeFormatOptions = {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
hour12: false,
|
|
};
|
|
|
|
const formattedDate = date.toLocaleDateString('en-US', optionsDate);
|
|
const formattedTime = date.toLocaleTimeString('en-US', optionsTime);
|
|
|
|
return `${formattedDate} ⎯ ${formattedTime}`;
|
|
}
|
|
|
|
/**
|
|
* Converts a given number of seconds into a human-readable format.
|
|
* @param {number} seconds The number of seconds to convert.
|
|
* @returns {string} The formatted time string, either in days (e.g., "1.2d"), hours (e.g., "1.2h"), minutes (e.g., "~7m"), or seconds (e.g., "~45s").
|
|
*/
|
|
|
|
export function formatTime(seconds: number): string {
|
|
const days = seconds / 86400;
|
|
|
|
if (days >= 1) {
|
|
return `${days.toFixed(1)}d`;
|
|
}
|
|
|
|
const hours = seconds / 3600;
|
|
if (hours >= 1) {
|
|
return `${hours.toFixed(1)}h`;
|
|
}
|
|
|
|
const minutes = seconds / 60;
|
|
if (minutes >= 1) {
|
|
return `${minutes.toFixed(1)}m`;
|
|
}
|
|
|
|
return `${seconds.toFixed(1)}s`;
|
|
}
|
|
|
|
export const nanoToMilli = (nanoseconds: number): number =>
|
|
nanoseconds / 1_000_000;
|
|
|
|
export const epochToTimeString = (epochMs: number): string => {
|
|
console.log({ epochMs });
|
|
const date = new Date(epochMs);
|
|
const options: Intl.DateTimeFormatOptions = {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
hour12: false,
|
|
};
|
|
return date.toLocaleTimeString('en-US', options);
|
|
};
|