feat: fix some issues

Author: jaypyles

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    node: true, // Add this line to specify the Node.js environment
+  },
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  extends: [
+    'eslint:recommended', // Use the recommended rules from ESLint
+    'plugin:@typescript-eslint/recommended', // Use the recommended rules from the @typescript-eslint/eslint-plugin
+  ],
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+  },
+  rules: {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'], // Ensure ESLint checks TypeScript files
+      rules: {
+        // Add TypeScript-specific rules here if needed
+      },
+    },
+  ],
+};

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

src/components/dashboard/widgets/external-integrations/argocd-integration/argocd-integration.module.css

@@ -1,15 +1,14 @@
 .applications {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: 0.5rem;
 }
 
 .application {
   background-color: var(--integration-bg-color);
-  padding: 0.125rem;
+  padding: 0.5rem;
   border-radius: 0.125rem;
 
-  width: 100%;
   text-align: center;
 
   display: flex;

src/components/dashboard/widgets/external-integrations/argocd-integration/argocd-integration.tsx

@@ -27,8 +27,9 @@ const Applications = ({ applications }: { applications: ArgoCDData[] }) => {
             <span className={classes.applicationName}>{application.name}</span>
             <span
               className={clsx("circle", {
-                [classes.synced]: application.status.toLowerCase() === "synced",
-                [classes.outOfSync]:
+                [classes.synced as string]:
+                  application.status.toLowerCase() === "synced",
+                [classes.outOfSync as string]:
                   application.status.toLowerCase() === "outofsync",
               })}
             ></span>

src/components/dashboard/widgets/external-integrations/uptime-kuma-integration/uptime-kuma-integration.tsx

@@ -21,12 +21,14 @@ export const UptimeKumaIntegration = ({
           <Tooltip title={key} placement="top" key={key}>
             <div
               className={clsx(classes.uptime, {
-                [classes.up]: data.uptime[key].msg.includes("200"),
-                [classes.down]: !data.uptime[key].msg.includes("200"),
+                [classes.up as string]:
+                  data.uptime[key as string]?.msg.includes("200"),
+                [classes.down as string]:
+                  !data.uptime[key as string]?.msg.includes("200"),
               })}
             >
               <div className={classes.circle}></div>
-              <Typography>{data.uptime[key].ping}ms</Typography>
+              <Typography>{data.uptime[key as string]?.ping}ms</Typography>
             </div>
           </Tooltip>
         ))}
@@ -35,11 +37,7 @@ export const UptimeKumaIntegration = ({
   };
 
   return (
-    <Integration
-      title="uptime-kuma"
-      icon="/icons/kuma.png"
-      link={url}
-    >
+    <Integration title="uptime-kuma" icon="/icons/kuma.png" link={url}>
       <Uptimes />
     </Integration>
   );

src/components/dashboard/widgets/running-containers/running-containers.tsx

@@ -32,20 +32,22 @@ export const RunningContainers = ({
     return null;
   }
 
+  if (!containerCount) {
+    return null;
+  }
+
   return (
-    containerCount && (
-      <div className={`${classes.runningContainers} ${className}`}>
-        <Typography
-          variant="body2"
-          color="text.secondary"
-          component="p"
-          className={classes.containerCount}
-          display="inline"
-        >
-          <DirectionsBoatIcon fontSize="inherit" className={classes.shipIcon} />
-          {containerCount.stdout}
-        </Typography>
-      </div>
-    )
+    <div className={`${classes.runningContainers} ${className}`}>
+      <Typography
+        variant="body2"
+        color="text.secondary"
+        component="p"
+        className={classes.containerCount}
+        display="inline"
+      >
+        <DirectionsBoatIcon fontSize="inherit" className={classes.shipIcon} />
+        {containerCount.stdout}
+      </Typography>
+    </div>
   );
 };

src/components/host/command-queue/command-queue.tsx

@@ -45,7 +45,7 @@ export const CommandQueue = ({
       ""
     );
 
-    combinedOutput = `$ ${command.commands[0].command}\n${combinedOutput}`;
+    combinedOutput = `$ ${command.commands[0]?.command}\n${combinedOutput}`;
     setViewedResult(combinedOutput);
     setOpen();
   };
@@ -89,6 +89,8 @@ export const CommandQueue = ({
 
       return () => clearInterval(intervalId);
     }
+
+    return;
   }, [host]);
 
   if (loading && commands.length === 0) {
@@ -108,7 +110,7 @@ export const CommandQueue = ({
         {commands.map((command, index) => (
           <CursorTooltip
             title="View Output"
-            key={`${command.commands[0].name}-${index}`}
+            key={`${command.commands[0]?.name}-${index}`}
           >
             <TableRow
               key={index}

src/components/shared/integration/integration.tsx

@@ -35,7 +35,7 @@ const Integration = ({
 
   return (
     <Paper
-      className={clsx(classes.integration, { [classes.link]: link })}
+      className={clsx(classes.integration, { [classes.link as string]: link })}
       onClick={handleNavigate}
       style={{
         backgroundColor: isHovered ? hoverCardColor : cardColor,

src/lib/utils.ts

@@ -14,15 +14,19 @@ export const fetchAndSet = async (
   setter: (arg: any) => void,
   axios?: AxiosCacheInstance
 ) => {
-  if (axios) {
-    const response = await axios.get(url);
-    setter(response.data);
-    return;
-  }
+  try {
+    if (axios) {
+      const response = await axios.get(url);
+      setter(response.data);
+      return;
+    }
 
-  const response = await fetch(url);
-  const json = await response.json();
-  setter(json);
+    const response = await fetch(url);
+    const json = await response.json();
+    setter(json);
+  } catch (error) {
+    console.error(error);
+  }
 };
 
 export const fetchAndSetWithPayload = async (

src/pages/api/[host_name]/stats.ts

@@ -27,7 +27,7 @@ export default async function handler(
       }
     }
 
-    let storage: object[] = [];
+    const storage: object[] = [];
 
     paths.forEach((path: string) => {
       const storageSizeRegex = new RegExp(
@@ -44,7 +44,7 @@ export default async function handler(
             size: match[2],
             used: match[3],
             available: match[4],
-            usePercent: Number(match[5].replace("%", "")),
+            usePercent: Number(match[5]?.replace("%", "")),
           };
 
           storage.push(storageParts);

tsconfig.json

@@ -28,7 +28,9 @@
     // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": [
+        "src/*"
+      ]
     },
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
@@ -80,7 +82,7 @@
     /* Type Checking */
     "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    "strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
     // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
     // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
@@ -90,9 +92,9 @@
     // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
     // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
     // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    "noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
     // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
     // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
     // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
     // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
@@ -110,11 +112,17 @@
     "incremental": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
   "include": [
     "src",
-    "src/declaration.d.ts"
+    "src/declaration.d.ts",
+    "./dist/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"