fix: eslint fixes

src/components/Canary/data.js

@@ -1,4 +1,5 @@
 import { isEmpty } from "./utils";
+
 export function CanarySorter(check) {
   return GetName(check).toLowerCase();
 }

src/components/Canary/labels.js

@@ -99,4 +99,4 @@ export function filterChecksByLabels(checks, labelFilters) {
     }
   });
   return newChecks;
-}
+}

src/components/Canary/renderers.js

@@ -10,6 +10,7 @@ export function Duration({ ms }) {
   try {
     ms = Number(ms);
   } catch (e) {
+    // eslint-disable-next-line no-console
     console.error("invalid number format", ms);
     return "";
   }
@@ -74,7 +75,7 @@ export function Latency({ check }) {
 
 export function Percentage({ val, upper, lower }) {
   const empty = <span className="text-gray-500 text-light text-xs">-</span>;
-  if ((isEmpty(lower) && isEmpty(val)) || (upper == 0 && lower == 0)) {
+  if ((isEmpty(lower) && isEmpty(val)) || (upper === 0 && lower === 0)) {
     return empty;
   }
   if (upper != null && lower != null) {
@@ -101,7 +102,7 @@ export function Percentage({ val, upper, lower }) {
 
 export function Title({ check, showIcon = true }) {
   if (check == null) {
-    return <span className="bg-red-400" > null</span>
+    return <span className="bg-red-400"> null</span>;
   }
   return (
     <>

src/components/Canary/status.js

@@ -5,11 +5,7 @@ export function StatusList({ check, checkStatuses }) {
     return (
       <>
         {check.checkStatuses.map((status) => (
-          <CanaryStatus
-            key={status.id}
-            status={status}
-            className="mr-0.5"
-          />
+          <CanaryStatus key={status.id} status={status} className="mr-0.5" />
         ))}
       </>
     );

src/components/Canary/table.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { FaChevronRight } from "react-icons/fa";
 import { Title, Uptime, Latency } from "./renderers";
 import { StatusList } from "./status";
-import { aggregate } from "./aggregate"
+import { aggregate } from "./aggregate";
 
 export function CanaryTable({
   className,
@@ -84,13 +84,12 @@ export function CanaryTable({
   );
 }
 
-
 function TableGroupRow({ title, items, onClick, showIcon, ...rest }) {
   const [expanded, setExpanded] = useState(false);
   const [aggregated, setAggregated] = useState(null);
 
   useEffect(() => {
-    setAggregated(aggregate(title, items))
+    setAggregated(aggregate(title, items));
   }, [items, items.length]);
 
   return (
@@ -107,8 +106,9 @@ function TableGroupRow({ title, items, onClick, showIcon, ...rest }) {
         <td className="px-6 py-3 w-full">
           <div className="flex items-center select-none">
             <FaChevronRight
-              className={`${expanded ? "transform rotate-90" : ""
-                } mr-4 duration-75`}
+              className={`${
+                expanded ? "transform rotate-90" : ""
+              } mr-4 duration-75`}
             />
             <Title check={aggregated} />
           </div>

src/components/Canary/utils.js

@@ -2,10 +2,7 @@ export function getPercentage(uptime) {
   if (uptime == null) {
     return null;
   }
-  if (uptime.uptime) {
-    uptime = uptime;
-  }
-  if (uptime.passed + uptime.failed == 0) {
+  if (uptime.passed + uptime.failed === 0) {
     return null;
   }
   return uptime.passed / (uptime.passed + uptime.failed);

src/components/Status/index.js

@@ -1,4 +1,5 @@
-import "./style.css"
+import "./style.css";
+
 export function Status({ good, mixed, className = "" }) {
   if (mixed) {
     className += " bg-mixed";

src/components/Table/index.js

@@ -29,10 +29,7 @@ export function Table({ columns, data, id }) {
                   // eslint-disable-next-line react/no-array-index-key
                   <tr key={`${id}.${idx}`}>
                     {columns.map((column) => (
-                      <td
-                        key={column.name}
-                        className="px-6 py-4 "
-                      >
+                      <td key={column.name} className="px-6 py-4 ">
                         <div className="text-sm text-gray-900">
                           {row[column.name.toLowerCase()]}
                         </div>

src/pages/Examples/index.js

@@ -221,9 +221,9 @@ export function Examples() {
             <Icon icon={Icons.s3} />
             <Icon name="s3" />
             <Icon name="mongo" />
-            <Status good={true} />
+            <Status good />
             <Status good={false} className="h-16 w-16" />
-            <Status mixed={true} className="h-16 w-16" />
+            <Status mixed className="h-16 w-16" />
           </div>
         </section>
         <section className="p-8 rounded-md shadow-md mb-12 border border-gray-200">
@@ -260,7 +260,6 @@ export function Examples() {
           </div>
         </section>
 
-
         <section className="p-8 rounded-md shadow-md mb-12 border border-gray-200">
           <h4>Card</h4>
           <div className="mt-4 bg-gray-50 p-8 rounded-md">