feat: add indefinitely option to duration picker

flanksource · Feb 10, 2025 · 2030000 · 2030000
1 parent c332f68
commit 2030000
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 5 deletions.
diff --git a/src/api/services/notifications.ts b/src/api/services/notifications.ts
@@ -94,6 +94,10 @@ export const silenceNotification = async (
 export const updateNotificationSilence = async (
   data: Omit<NotificationSilenceItem, "created_at">
 ) => {
+  if (data.until === "indefinitely") {
+    data["until"] = null;
+  }
+
   const res = await IncidentCommander.patch(
     `/notification_silences?id=eq.${data.id}`,
     data

diff --git a/src/api/types/notifications.ts b/src/api/types/notifications.ts
@@ -53,7 +53,7 @@ export type SilenceNotificationResponse = {
   check_id?: string;
   canary_id?: string;
   from: string;
-  until: string;
+  until: string | null;
   description?: string;
   recursive?: boolean;
   namespace?: string;
@@ -94,7 +94,7 @@ export type NotificationSilenceItem = {
   filter?: string;
   error?: string;
   from: string;
-  until: string;
+  until: string | null;
   recursive?: boolean;
   config_id?: string;
   check_id?: string;

diff --git a/src/components/Notifications/SilenceNotificationsList.tsx b/src/components/Notifications/SilenceNotificationsList.tsx
@@ -48,6 +48,7 @@ const silenceNotificationListColumns: MRT_ColumnDef<NotificationSilenceItemApiRe
               className={clsx(isExpired && "line-through")}
               from={from}
               to={until}
+              displayType={"duration"}
             ></Age>
             {isExpired && <span className="pl-1 text-red-500">Expired</span>}
           </span>

diff --git a/src/ui/Age/Age.tsx b/src/ui/Age/Age.tsx
@@ -13,15 +13,18 @@ dayjs.extend(LocalizedFormat);
 type AgeProps = {
   className?: string;
   from?: Date | string;
-  to?: Date | string;
+  to?: Date | string | null;
   suffix?: boolean;
+  // duration handles null "to" time differently.
+  displayType?: "age" | "duration";
 };
 
 export default function Age({
   className = "",
   from,
   to,
-  suffix = false
+  suffix = false,
+  displayType = "age"
 }: AgeProps) {
   if (isEmpty(from)) {
     return null;
@@ -36,7 +39,9 @@ export default function Age({
           data-tooltip-id={`age-tooltip-${_from.local().fromNow(!suffix)}`}
           className={className}
         >
-          {_from.local().fromNow(!suffix)}
+          {displayType === "duration"
+            ? "Indefinitely"
+            : _from.local().fromNow(!suffix)}
         </span>
         <Tooltip
           id={`age-tooltip-${_from.local().fromNow(!suffix)}`}

diff --git a/src/ui/Dates/TimeRangePicker/TimeRangePicker.tsx b/src/ui/Dates/TimeRangePicker/TimeRangePicker.tsx
@@ -37,6 +37,11 @@ export function TimeRangePicker({
     if (currentRange?.type === "absolute") {
       return `${currentRange.from} - ${currentRange.to}`;
     }
+
+    if (!currentRange?.display) {
+      return "Indefinitely";
+    }
+
     return currentRange?.display;
   }, [currentRange]);
 

diff --git a/src/ui/Dates/TimeRangePicker/rangeOptions.ts b/src/ui/Dates/TimeRangePicker/rangeOptions.ts
@@ -120,6 +120,11 @@ export const rangeOptionsCategories: RangeOptionsCategory[] = [
     name: "Relative time ranges",
     type: "future",
     options: [
+      {
+        type: "relative",
+        display: "Indefinitely",
+        range: "indefinitely"
+      },
       {
         type: "relative",
         display: "5 minutes",