(fix) style fix on alerts tab, remove unresolve, fix placeholder logi…

…c, fix pagination counting logic
metlo-labs · Sep 3, 2022 · 41785f4 · 41785f4
1 parent 06e07c8
commit 41785f4
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 32 deletions.
diff --git a/frontend/src/components/Alert/AlertComponent.tsx b/frontend/src/components/Alert/AlertComponent.tsx
@@ -150,7 +150,7 @@ export const AlertComponent: React.FC<AlertComponentProps> = ({
           </ModalBody>
           {alert.status !== Status.IGNORED && (
             <ModalFooter>
-              {alert.status !== Status.RESOLVED ? (
+              {alert.status !== Status.RESOLVED && (
                 <Button
                   isLoading={updating}
                   leftIcon={<FiCheckCircle />}
@@ -164,19 +164,6 @@ export const AlertComponent: React.FC<AlertComponentProps> = ({
                 >
                   Resolve
                 </Button>
-              ) : (
-                <Button
-                  isLoading={updating}
-                  leftIcon={<AiOutlineExclamationCircle fontSize="20px" />}
-                  colorScheme="red"
-                  onClick={() =>
-                    handleUpdateAlert(alert.uuid, {
-                      updateType: UpdateAlertType.UNRESOLVE,
-                    })
-                  }
-                >
-                  Unresolve
-                </Button>
               )}
             </ModalFooter>
           )}

diff --git a/frontend/src/components/Alert/AlertDetail.tsx b/frontend/src/components/Alert/AlertDetail.tsx
@@ -298,8 +298,9 @@ export const AlertDetail: React.FC<AlertDetailProps> = ({
                 }}
                 value={resolutionMessage || ""}
                 placeholder={
-                  alert.status !== Status.RESOLVED &&
-                  "Provide reason for resolving..."
+                  alert.status !== Status.RESOLVED
+                    ? "Provide reason for resolving..."
+                    : ""
                 }
                 onChange={e => setResolutionMessage(e.target.value)}
               />

diff --git a/frontend/src/components/Alert/AlertList.tsx b/frontend/src/components/Alert/AlertList.tsx
@@ -265,8 +265,9 @@ export const AlertList: React.FC<AlertListProps> = ({
       {totalCount && (
         <HStack alignSelf="flex-end" p="3" pr="70px">
           <Text>
-            {(page - 1) * params.offset + 1}-
-            {(page - 1) * params.offset + alerts.length} of {totalCount} alerts
+            {(page - 1) * ALERT_PAGE_LIMIT + 1}-
+            {(page - 1) * ALERT_PAGE_LIMIT + alerts.length} of {totalCount}{" "}
+            alerts
           </Text>
           <PaginationComponent
             pageSize={ALERT_PAGE_LIMIT}

diff --git a/frontend/src/components/Endpoint/AlertTab.tsx b/frontend/src/components/Endpoint/AlertTab.tsx
@@ -61,7 +61,7 @@ export const AlertTab: React.FC<AlertTabProps> = ({ apiEndpointUuid }) => {
   }
 
   return (
-    <Box pt="4" px="8" h="full">
+    <Box py="4" px="8" h="full">
       <AlertList
         alerts={alerts}
         handleUpdateAlert={handleUpdateAlert}

diff --git a/frontend/src/hooks/use-debounce.ts b/frontend/src/hooks/use-debounce.ts
@@ -1,17 +1,14 @@
 import { useState, useEffect } from "react"
 
 export const useDebounce = (value: string, delay: number) => {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(
-    () => {
-      const handler = setTimeout(() => {
-        setDebouncedValue(value);
-      }, delay);
-      return () => {
-        clearTimeout(handler);
-      };
-    },
-    [value, delay]
-  );
-  return debouncedValue;
+  const [debouncedValue, setDebouncedValue] = useState(value)
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, delay])
+  return debouncedValue
 }