chore: maintenance window ui

keep-ui/app/blackout/create-or-update-blackout-rule.tsx → keep-ui/app/maintenance/create-or-update-maintenance-rule.tsx

@@ -14,47 +14,47 @@ import { useSession } from "next-auth/react";
 import { FormEvent, useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { getApiURL } from "utils/apiUrl";
-import { BlackoutRule } from "./model";
-import { useBlackouts } from "utils/hooks/useBlackoutRules";
+import { MaintenanceRule } from "./model";
+import { useMaintenanceRules } from "utils/hooks/useMaintenanceRules";
 import { AlertsRulesBuilder } from "app/alerts/alerts-rules-builder";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
 interface Props {
-  blackoutToEdit: BlackoutRule | null;
-  editCallback: (rule: BlackoutRule | null) => void;
+  maintenanceToEdit: MaintenanceRule | null;
+  editCallback: (rule: MaintenanceRule | null) => void;
 }
 
-export default function CreateOrUpdateBlackoutRule({
-  blackoutToEdit,
+export default function CreateOrUpdateMaintenanceRule({
+  maintenanceToEdit,
   editCallback,
 }: Props) {
   const { data: session } = useSession();
-  const { mutate } = useBlackouts();
-  const [blackoutName, setBlackoutName] = useState<string>("");
+  const { mutate } = useMaintenanceRules();
+  const [maintenanceName, setMaintenanceName] = useState<string>("");
   const [description, setDescription] = useState<string>("");
   const [celQuery, setCelQuery] = useState<string>("");
   const [startTime, setStartTime] = useState<Date | null>(new Date());
   const [endInterval, setEndInterval] = useState<number>(5);
   const [intervalType, setIntervalType] = useState<string>("minutes");
   const [enabled, setEnabled] = useState<boolean>(true);
-  const editMode = blackoutToEdit !== null;
+  const editMode = maintenanceToEdit !== null;
 
   useEffect(() => {
-    if (blackoutToEdit) {
-      setBlackoutName(blackoutToEdit.name);
-      setDescription(blackoutToEdit.description ?? "");
-      setCelQuery(blackoutToEdit.cel_query);
-      setStartTime(new Date(blackoutToEdit.start_time));
-      setEnabled(blackoutToEdit.enabled);
-      if (blackoutToEdit.duration_seconds) {
-        setEndInterval(blackoutToEdit.duration_seconds / 60);
+    if (maintenanceToEdit) {
+      setMaintenanceName(maintenanceToEdit.name);
+      setDescription(maintenanceToEdit.description ?? "");
+      setCelQuery(maintenanceToEdit.cel_query);
+      setStartTime(new Date(maintenanceToEdit.start_time));
+      setEnabled(maintenanceToEdit.enabled);
+      if (maintenanceToEdit.duration_seconds) {
+        setEndInterval(maintenanceToEdit.duration_seconds / 60);
       }
     }
-  }, [blackoutToEdit]);
+  }, [maintenanceToEdit]);
 
   const clearForm = () => {
-    setBlackoutName("");
+    setMaintenanceName("");
     setDescription("");
     setCelQuery("");
     setStartTime(new Date());
@@ -83,17 +83,17 @@ export default function CreateOrUpdateBlackoutRule({
     return durationInSeconds;
   };
 
-  const addBlackout = async (e: FormEvent) => {
+  const addMaintenanceRule = async (e: FormEvent) => {
     e.preventDefault();
     const apiUrl = getApiURL();
-    const response = await fetch(`${apiUrl}/blackout`, {
+    const response = await fetch(`${apiUrl}/maintenance`, {
       method: "POST",
       headers: {
         Authorization: `Bearer ${session?.accessToken}`,
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        name: blackoutName,
+        name: maintenanceName,
         description: description,
         cel_query: celQuery,
         start_time: startTime,
@@ -104,39 +104,42 @@ export default function CreateOrUpdateBlackoutRule({
     if (response.ok) {
       clearForm();
       mutate();
-      toast.success("Blackout rule created successfully");
+      toast.success("Maintenance rule created successfully");
     } else {
       toast.error(
-        "Failed to create blackout rule, please contact us if this issue persists."
+        "Failed to create maintenance rule, please contact us if this issue persists."
       );
     }
   };
 
-  const updateBlackout = async (e: FormEvent) => {
+  const updateMaintenanceRule = async (e: FormEvent) => {
     e.preventDefault();
     const apiUrl = getApiURL();
-    const response = await fetch(`${apiUrl}/blackout/${blackoutToEdit?.id}`, {
-      method: "PUT",
-      headers: {
-        Authorization: `Bearer ${session?.accessToken}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        name: blackoutName,
-        description: description,
-        cel_query: celQuery,
-        start_time: startTime,
-        duration_seconds: calculateDurationInSeconds(),
-        enabled: enabled,
-      }),
-    });
+    const response = await fetch(
+      `${apiUrl}/maintenance/${maintenanceToEdit?.id}`,
+      {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${session?.accessToken}`,
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: maintenanceName,
+          description: description,
+          cel_query: celQuery,
+          start_time: startTime,
+          duration_seconds: calculateDurationInSeconds(),
+          enabled: enabled,
+        }),
+      }
+    );
     if (response.ok) {
       exitEditMode();
       mutate();
-      toast.success("Blackout rule updated successfully");
+      toast.success("Maintenance rule updated successfully");
     } else {
       toast.error(
-        "Failed to update blackout rule, please contact us if this issue persists."
+        "Failed to update maintenance rule, please contact us if this issue persists."
       );
     }
   };
@@ -147,31 +150,34 @@ export default function CreateOrUpdateBlackoutRule({
   };
 
   const submitEnabled = (): boolean => {
-    return !!blackoutName && !!celQuery && !!startTime;
+    return !!maintenanceName && !!celQuery && !!startTime;
   };
 
   const date = new Date();
   const currentMins = date.getMinutes();
   const currentHour = date.getHours();
 
   return (
-    <form className="py-2" onSubmit={editMode ? updateBlackout : addBlackout}>
-      <Subtitle>Blackout Metadata</Subtitle>
+    <form
+      className="py-2"
+      onSubmit={editMode ? updateMaintenanceRule : addMaintenanceRule}
+    >
+      <Subtitle>Maintenance Rule Metadata</Subtitle>
       <div className="mt-2.5">
         <Text>
           Name<span className="text-red-500 text-xs">*</span>
         </Text>
         <TextInput
-          placeholder="Blackout Name"
+          placeholder="Maintenance Name"
           required={true}
-          value={blackoutName}
-          onValueChange={setBlackoutName}
+          value={maintenanceName}
+          onValueChange={setMaintenanceName}
         />
       </div>
       <div className="mt-2.5">
         <Text>Description</Text>
         <Textarea
-          placeholder="Blackout Description"
+          placeholder="Maintenance Description"
           value={description}
           onValueChange={setDescription}
         />
@@ -218,7 +224,7 @@ export default function CreateOrUpdateBlackoutRule({
           </Select>
         </div>
         <Text className="text-xs text-red-400">
-          * Please adjust when editing existing blackout rule, as this is
+          * Please adjust when editing existing maintenance rule, as this is
           calculated upon submit.
         </Text>
       </div>

keep-ui/app/blackout/layout.tsx → keep-ui/app/maintenance/layout.tsx

@@ -2,7 +2,7 @@ import { Title, Subtitle } from "@tremor/react";
 export default function Layout({ children }: { children: any }) {
   return (
     <main className="p-4 md:p-10 mx-auto max-w-full">
-      <Title>Blackouts</Title>
+      <Title>Maintenance Windows</Title>
       <Subtitle>
         Configure maintenance windows and suppress alerts automatically
       </Subtitle>

keep-ui/app/blackout/blackout-table.tsx → keep-ui/app/maintenance/maintenance-rules-table.tsx

@@ -20,19 +20,19 @@ import { MdRemoveCircle, MdModeEdit } from "react-icons/md";
 import { useSession } from "next-auth/react";
 import { getApiURL } from "utils/apiUrl";
 import { toast } from "react-toastify";
-import { BlackoutRule } from "./model";
+import { MaintenanceRule } from "./model";
 import { IoCheckmark } from "react-icons/io5";
 import { HiMiniXMark } from "react-icons/hi2";
 import { useState } from "react";
 
-const columnHelper = createColumnHelper<BlackoutRule>();
+const columnHelper = createColumnHelper<MaintenanceRule>();
 
 interface Props {
-  blackouts: BlackoutRule[];
-  editCallback: (rule: BlackoutRule) => void;
+  maintenanceRules: MaintenanceRule[];
+  editCallback: (rule: MaintenanceRule) => void;
 }
 
-export default function BlackoutsTable({ blackouts, editCallback }: Props) {
+export default function MaintenanceRulesTable({ maintenanceRules, editCallback }: Props) {
   const { data: session } = useSession();
   const [expanded, setExpanded] = useState<ExpandedState>({});
 
@@ -59,7 +59,7 @@ export default function BlackoutsTable({ blackouts, editCallback }: Props) {
             icon={MdRemoveCircle}
             onClick={(e: any) => {
               e.preventDefault();
-              deleteBlackout(context.row.original.id!);
+              deleteMaintenanceRule(context.row.original.id!);
             }}
           />
         </div>
@@ -102,30 +102,30 @@ export default function BlackoutsTable({ blackouts, editCallback }: Props) {
         </div>
       ),
     }),
-  ] as DisplayColumnDef<BlackoutRule>[];
+  ] as DisplayColumnDef<MaintenanceRule>[];
 
   const table = useReactTable({
     columns,
-    data: blackouts,
+    data: maintenanceRules,
     state: { expanded },
     getCoreRowModel: getCoreRowModel(),
     onExpandedChange: setExpanded,
   });
 
-  const deleteBlackout = (blackoutId: number) => {
+  const deleteMaintenanceRule = (maintenanceRuleId: number) => {
     const apiUrl = getApiURL();
-    if (confirm("Are you sure you want to delete this blackout rule?")) {
-      fetch(`${apiUrl}/blackouts/${blackoutId}`, {
+    if (confirm("Are you sure you want to delete this maintenance rule?")) {
+      fetch(`${apiUrl}/maintenance/${maintenanceRuleId}`, {
         method: "DELETE",
         headers: {
           Authorization: `Bearer ${session?.accessToken}`,
         },
       }).then((response) => {
         if (response.ok) {
-          toast.success("Blackout rule deleted successfully");
+          toast.success("Maintenance rule deleted successfully");
         } else {
           toast.error(
-            "Failed to delete blackout rule, contact us if this persists"
+            "Failed to delete maintenance rule, contact us if this persists"
           );
         }
       });

keep-ui/app/maintenance/maintenance.tsx

@@ -0,0 +1,48 @@
+"use client";
+import { Badge, Callout, Card } from "@tremor/react";
+import { useMaintenanceRules } from "utils/hooks/useMaintenanceRules";
+import Loading from "app/loading";
+import { MdWarning } from "react-icons/md";
+import { useState } from "react";
+import { MaintenanceRule } from "./model";
+import CreateOrUpdateMaintenanceRule from "./create-or-update-maintenance-rule";
+import MaintenanceRulesTable from "./maintenance-rules-table";
+
+export default function Maintenance() {
+  const { data: maintenanceRules, isLoading } = useMaintenanceRules();
+  const [maintenanceToEdit, setMaintenanceToEdit] = useState<MaintenanceRule | null>(
+    null
+  );
+
+  return (
+    <Card className="mt-10 p-4 md:p-10 mx-auto">
+      <div className="flex divide-x p-2">
+        <div className="w-1/3 pr-2.5">
+          <CreateOrUpdateMaintenanceRule
+            maintenanceToEdit={maintenanceToEdit}
+            editCallback={setMaintenanceToEdit}
+          />
+        </div>
+        <div className="w-2/3 pl-2.5">
+          {isLoading ? (
+            <Loading />
+          ) : maintenanceRules && maintenanceRules.length > 0 ? (
+            <MaintenanceRulesTable
+              maintenanceRules={maintenanceRules}
+              editCallback={setMaintenanceToEdit}
+            />
+          ) : (
+            <Callout
+              color="orange"
+              title="Maintenance rules do not exist"
+              icon={MdWarning}
+            >
+              No maintenance rules found. Configure new maintenance rule using the
+              maintenance rules wizard to the left.
+            </Callout>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}