clean up unused js parts

2023-10-03 10:39:49 +02:00 · 2023-10-03 10:39:49 +02:00 · b27dad1cc4
commit b27dad1cc4
parent 7c1e04a7d6
24 changed files with 135 additions and 201 deletions
--- a/pkgs/ui/src/app/join/page.tsx
+++ b/pkgs/ui/src/app/join/page.tsx
@ -0,0 +1,5 @@
+import JoinPrequel from "@/views/joinPrequel";
+
+export default function Page() {
+  return <JoinPrequel />;
+}
--- a/pkgs/ui/src/app/layout.tsx
+++ b/pkgs/ui/src/app/layout.tsx
@ -11,7 +11,7 @@ import {
  useMediaQuery,
  useTheme,
 } from "@mui/material";
-import { ChangeEvent, useState } from "react";
+import { useState } from "react";
 import { Toaster } from "react-hot-toast";
 import { StyledEngineProvider } from "@mui/material/styles";

@ -25,10 +25,10 @@ import axios from "axios";
 import {
  AppContext,
  WithAppState,
-  useAppState,
+  // useAppState,
 } from "@/components/hooks/useAppContext";
 import Background from "@/components/background";
-import { usePathname, redirect } from "next/navigation";
+// import { usePathname, redirect } from "next/navigation";

 const roboto = localFont({
  src: [
@ -45,16 +45,16 @@ axios.defaults.baseURL = "http://localhost:2979";
 // add negative margin for smooth transition to fill the space of the sidebar
 const translate = tw`lg:-ml-64 -ml-14`;

-const AutoRedirectEffect = () => {
-  const { isLoading, data } = useAppState();
-  const pathname = usePathname();
-  React.useEffect(() => {
-    if (!isLoading && !data.isJoined && pathname !== "/") {
-      redirect("/");
-    }
-  }, [isLoading, data, pathname]);
-  return <></>;
-};
+// const AutoRedirectEffect = () => {
+//   const { isLoading, data } = useAppState();
+//   const pathname = usePathname();
+//   React.useEffect(() => {
+//     if (!isLoading && !data.isJoined && pathname !== "/") {
+//       redirect("/");
+//     }
+//   }, [isLoading, data, pathname]);
+//   return <></>;
+// };

 export default function RootLayout({
  children,
@ -84,9 +84,9 @@ export default function RootLayout({
    }
  }, [userPrefersDarkmode, useDarkTheme, setUseDarkTheme]);

-  const changeThemeHandler = (target: ChangeEvent, currentValue: boolean) => {
-    setUseDarkTheme(currentValue);
-  };
+  // const changeThemeHandler = (target: ChangeEvent, currentValue: boolean) => {
+  //   setUseDarkTheme(currentValue);
+  // };

  return (
    <html lang="en">
@ -105,9 +105,7 @@ export default function RootLayout({
              <AppContext.Consumer>
                {(appState) => {
                  const showSidebarDerived = Boolean(
-                    showSidebar &&
-                      !appState.isLoading &&
-                      appState.data.isJoined,
+                    showSidebar && !appState.isLoading && appState.data.isJoined
                  );
                  return (
                    <>
@ -149,7 +147,7 @@ export default function RootLayout({
                          <div className="px-1">
                            <div className="relative flex h-full flex-1 flex-col">
                              <main>
-                                <AutoRedirectEffect />
+                                {/* <AutoRedirectEffect /> */}
                                <Button
                                  fullWidth
                                  onClick={() => {
--- a/pkgs/ui/src/app/page.tsx
+++ b/pkgs/ui/src/app/page.tsx
@ -7,6 +7,7 @@ import { QuickActions } from "@/components/dashboard/quickActions";
 import { TaskQueue } from "@/components/dashboard/taskQueue";
 import { useAppState } from "@/components/hooks/useAppContext";
 import { MachineContextProvider } from "@/components/hooks/useMachines";
+import { LoadingOverlay } from "@/components/join/loadingOverlay";
 import { tw } from "@/utils/tailwind";
 import JoinPrequel from "@/views/joinPrequel";

@ -37,7 +38,20 @@ const DashboardPanel = (props: DashboardPanelProps) => {
 };

 export default function Dashboard() {
-  const { data } = useAppState();
+  const { data, isLoading } = useAppState();
+  if (isLoading) {
+    return (
+      <div className="grid h-full place-items-center">
+        <div className="mt-8 w-full max-w-xl">
+          <LoadingOverlay
+            title="Clan Experience"
+            subtitle="Loading"
+            variant="circle"
+          />
+        </div>
+      </div>
+    );
+  }
  if (!data.isJoined) {
    return <JoinPrequel />;
  }
--- a/pkgs/ui/src/app/templates/[id]/page.tsx
+++ b/pkgs/ui/src/app/templates/[id]/page.tsx
@ -7,16 +7,12 @@ import {
  Edit,
  Group,
  Key,
-  MenuOpen,
-  NetworkCell,
  Settings,
  SettingsEthernet,
-  VisibilityOff,
 } from "@mui/icons-material";
 import {
  Avatar,
  Button,
-  Divider,
  IconButton,
  List,
  ListItem,
@ -29,7 +25,7 @@ import {
  Typography,
 } from "@mui/material";
 import { useState } from "react";
-import { useListMachines } from "@/api/default/default";
+// import { useListMachines } from "@/api/default/default";

 export async function generateStaticParams() {
  return [{ id: "1" }, { id: "2" }];
@ -46,7 +42,7 @@ interface TemplateDetailProps {
  params: { id: string };
 }
 export default function TemplateDetail({ params }: TemplateDetailProps) {
-  const { data, isLoading } = useListMachines();
+  // const { data, isLoading } = useListMachines();
  const details = getTemplate(params);

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
--- a/pkgs/ui/src/app/templates/page.tsx
+++ b/pkgs/ui/src/app/templates/page.tsx
@ -2,7 +2,6 @@ import { ChevronRight } from "@mui/icons-material";
 import {
  Avatar,
  Divider,
-  IconButton,
  List,
  ListItem,
  ListItemAvatar,
--- a/pkgs/ui/src/components/createMachineForm/customConfig.tsx
+++ b/pkgs/ui/src/components/createMachineForm/customConfig.tsx
@ -12,7 +12,7 @@ import {
  Paper,
  Typography,
 } from "@mui/material";
-import { IChangeEvent, FormProps } from "@rjsf/core";
+import { IChangeEvent } from "@rjsf/core";
 import { Form } from "@rjsf/mui";
 import validator from "@rjsf/validator-ajv8";
 import toast from "react-hot-toast";
@ -54,7 +54,7 @@ export function CustomConfig(props: FormStepContentProps) {
        }
        return acc;
      }, {}),
-    [schema],
+    [schema]
  );

  return isLoading ? (
@ -100,7 +100,7 @@ function ErrorList<
 }

 function PureCustomConfig(props: PureCustomConfigProps) {
-  const { schema, initialValues, formHooks } = props;
+  const { schema, formHooks } = props;
  const { setValue, watch } = formHooks;

  console.log({ schema });
@ -124,7 +124,7 @@ function PureCustomConfig(props: PureCustomConfigProps) {
        message: "invalid config",
      });
      toast.error(
-        "Configuration is invalid. Please check the highlighted fields for details.",
+        "Configuration is invalid. Please check the highlighted fields for details."
      );
    } else {
      formHooks.clearErrors("config");
--- a/pkgs/ui/src/components/createMachineForm/index.tsx
+++ b/pkgs/ui/src/components/createMachineForm/index.tsx
@ -5,19 +5,14 @@ import {
  Step,
  StepLabel,
  Stepper,
-  Typography,
  useMediaQuery,
  useTheme,
 } from "@mui/material";
-import React, { ReactNode, useState } from "react";
-import { useForm, UseFormReturn } from "react-hook-form";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
 import { CustomConfig } from "./customConfig";
 import { CreateMachineForm, FormStep } from "./interfaces";

-const SC = (props: { children: ReactNode }) => {
-  return <>{props.children}</>;
-};
-
 export function CreateMachineForm() {
  const formHooks = useForm<CreateMachineForm>({
    defaultValues: {
@ -25,7 +20,7 @@ export function CreateMachineForm() {
      config: {},
    },
  });
-  const { handleSubmit, control, watch, reset, formState } = formHooks;
+  const { handleSubmit, reset } = formHooks;
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const [activeStep, setActiveStep] = useState<number>(0);
--- a/pkgs/ui/src/components/createMachineForm/interfaces.ts
+++ b/pkgs/ui/src/components/createMachineForm/interfaces.ts
@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { ReactElement } from "react";
 import { UseFormReturn } from "react-hook-form";

 export type StepId = "template" | "modules" | "config" | "save";
--- a/pkgs/ui/src/components/dashboard/NetworkOverview/index.tsx
+++ b/pkgs/ui/src/components/dashboard/NetworkOverview/index.tsx
@ -8,7 +8,6 @@ import {
  ListItem,
  ListItemIcon,
  ListItemText,
-  Typography,
 } from "@mui/material";
 import Link from "next/link";
 import React from "react";
--- a/pkgs/ui/src/components/dashboard/appOverview/index.tsx
+++ b/pkgs/ui/src/components/dashboard/appOverview/index.tsx
@ -1,7 +1,5 @@
 import { DashboardCard } from "@/components/card";
 import Image from "next/image";
-import { ReactNode } from "react";
-
 interface AppCardProps {
  name: string;
  icon?: string;
@ -32,11 +30,6 @@ const AppCard = (props: AppCardProps) => {
  );
 };

-type App = {
-  name: string;
-  icon?: string;
-};
-
 const apps = [
  {
    name: "Firefox",
--- a/pkgs/ui/src/components/dashboard/notifications/index.tsx
+++ b/pkgs/ui/src/components/dashboard/notifications/index.tsx
@ -1,17 +1,12 @@
 import { DashboardCard } from "@/components/card";
 import { notificationData } from "@/data/dashboardData";
-import { tw } from "@/utils/tailwind";
 import {
  Avatar,
-  Chip,
  List,
  ListItem,
  ListItemAvatar,
-  ListItemButton,
-  ListItemIcon,
  ListItemText,
 } from "@mui/material";
-import { Label } from "recharts";

 import CheckIcon from "@mui/icons-material/Check";
 import InfoIcon from "@mui/icons-material/Info";
--- a/pkgs/ui/src/components/dashboard/quickActions/index.tsx
+++ b/pkgs/ui/src/components/dashboard/quickActions/index.tsx
@ -1,6 +1,6 @@
 "use client";
 import { DashboardCard } from "@/components/card";
-import { Button, Fab } from "@mui/material";
+import { Fab } from "@mui/material";
 import { MouseEventHandler, ReactNode } from "react";

 import LanIcon from "@mui/icons-material/Lan";
--- a/pkgs/ui/src/components/dashboard/taskQueue/index.tsx
+++ b/pkgs/ui/src/components/dashboard/taskQueue/index.tsx
@ -19,7 +19,7 @@ interface TaskEntryProps {
  details?: string;
 }
 const TaskEntry = (props: TaskEntryProps) => {
-  const { result, task, details, status } = props;
+  const { result, task, status } = props;
  return (
    <>
      <div className="col-span-1">{status}</div>
--- a/pkgs/ui/src/components/hooks/useAppContext.tsx
+++ b/pkgs/ui/src/components/hooks/useAppContext.tsx
@ -1,5 +1,5 @@
 import { useListMachines } from "@/api/default/default";
-import { Machine, MachinesResponse } from "@/api/model";
+import { MachinesResponse } from "@/api/model";
 import { AxiosError, AxiosResponse } from "axios";
 import React, {
  createContext,
@ -22,9 +22,9 @@ type AppContextType = {
  swrKey: string | false | Record<any, any>;
 };

-const initialState = {
-  isLoading: true,
-} as const;
+// const initialState = {
+//   isLoading: true,
+// } as const;

 export const AppContext = createContext<AppContextType>({} as AppContextType);

@ -38,7 +38,7 @@ interface AppContextProviderProps {
 }
 export const WithAppState = (props: AppContextProviderProps) => {
  const { children } = props;
-  const { data: rawData, isLoading, error, mutate, swrKey } = useListMachines();
+  const { isLoading, error, mutate, swrKey } = useListMachines();

  const [data, setAppState] = useState<AppState>({ isJoined: false });

--- a/pkgs/ui/src/components/hooks/useMachines.tsx
+++ b/pkgs/ui/src/components/hooks/useMachines.tsx
@ -62,7 +62,7 @@ export const MachineContextProvider = (props: MachineContextProviderProps) => {
    if (!isLoading && !error && !isValidating && rawData) {
      const { machines } = rawData.data;
      return machines.filter((m) =>
-        filters.every((f) => m[f.name] === f.value),
+        filters.every((f) => m[f.name] === f.value)
      );
    }
    return [];
--- a/pkgs/ui/src/components/join/configureVM.tsx
+++ b/pkgs/ui/src/components/join/configureVM.tsx
@ -10,11 +10,7 @@ import {
 } from "@mui/material";
 import { Controller, SubmitHandler, UseFormReturn } from "react-hook-form";
 import { FlakeBadge } from "../flakeBadge/flakeBadge";
-import {
-  createVm,
-  useGetVmLogs,
-  useInspectFlakeAttrs,
-} from "@/api/default/default";
+import { createVm, useInspectFlakeAttrs } from "@/api/default/default";
 import { VmConfig } from "@/api/model";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
--- a/pkgs/ui/src/components/join/confirm.tsx
+++ b/pkgs/ui/src/components/join/confirm.tsx
@ -3,7 +3,7 @@ import { useState } from "react";
 import { LoadingOverlay } from "./loadingOverlay";
 import { FlakeBadge } from "../flakeBadge/flakeBadge";
 import { Typography, Button } from "@mui/material";
-import { FlakeResponse } from "@/api/model";
+// import { FlakeResponse } from "@/api/model";
 import { ConfirmVM } from "./confirmVM";
 import { Log } from "./log";
 import GppMaybeIcon from "@mui/icons-material/GppMaybe";
@ -11,22 +11,29 @@ import { useInspectFlake } from "@/api/default/default";

 interface ConfirmProps {
  flakeUrl: string;
+  flakeAttr: string;
  handleBack: () => void;
 }
 export const Confirm = (props: ConfirmProps) => {
-  const { flakeUrl, handleBack } = props;
+  const { flakeUrl, handleBack, flakeAttr } = props;
  const [userConfirmed, setUserConfirmed] = useState(false);

-  const { data, error, isLoading } = useInspectFlake({ url: flakeUrl });
+  const { data, isLoading } = useInspectFlake({
+    url: flakeUrl,
+  });

  return userConfirmed ? (
-    <ConfirmVM url={flakeUrl} handleBack={handleBack} />
+    <ConfirmVM
+      url={flakeUrl}
+      handleBack={handleBack}
+      defaultFlakeAttr={flakeAttr}
+    />
  ) : (
    <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2 ">
      {isLoading && (
        <LoadingOverlay
          title={"Loading Flake"}
-          subtitle={<FlakeBadge flakeUrl={flakeUrl} flakeAttr="" />}
+          subtitle={<FlakeBadge flakeUrl={flakeUrl} flakeAttr={flakeAttr} />}
        />
      )}
      {data && (
--- a/pkgs/ui/src/components/join/confirmVM.tsx
+++ b/pkgs/ui/src/components/join/confirmVM.tsx
@ -3,30 +3,23 @@ import React, { useEffect, useState } from "react";
 import { VmConfig } from "@/api/model";
 import { useVms } from "@/components/hooks/useVms";

-import { Alert, AlertTitle, Button } from "@mui/material";
-
-import { useSearchParams } from "next/navigation";
-
-import { createVm, inspectVm, useGetVmLogs } from "@/api/default/default";
-
 import { LoadingOverlay } from "./loadingOverlay";
-import { FlakeBadge } from "../flakeBadge/flakeBadge";
-import { Log } from "./log";
-import { SubmitHandler, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { ConfigureVM } from "./configureVM";
 import { VmBuildLogs } from "./vmBuildLogs";

 interface ConfirmVMProps {
  url: string;
  handleBack: () => void;
+  defaultFlakeAttr: string;
 }

 export function ConfirmVM(props: ConfirmVMProps) {
-  const { url, handleBack } = props;
+  const { url, defaultFlakeAttr } = props;
  const formHooks = useForm<VmConfig>({
    defaultValues: {
      flake_url: url,
-      flake_attr: "default",
+      flake_attr: defaultFlakeAttr,
      cores: 4,
      graphics: true,
      memory_size: 2048,
@ -34,11 +27,12 @@ export function ConfirmVM(props: ConfirmVMProps) {
  });
  const [vmUuid, setVmUuid] = useState<string | null>(null);

-  const { setValue, watch, formState, handleSubmit } = formHooks;
-  const { config, error, isLoading } = useVms({
+  const { setValue, watch, formState } = formHooks;
+  const { config, isLoading } = useVms({
    url,
-    attr: watch("flake_attr"),
+    attr: watch("flake_attr") || defaultFlakeAttr,
  });
+
  useEffect(() => {
    if (config) {
      setValue("cores", config?.cores);
@ -51,44 +45,12 @@ export function ConfirmVM(props: ConfirmVMProps) {
    <div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2">
      {!formState.isSubmitted && (
        <>
-          {/* {error && (
-            <Alert severity="error" className="w-full max-w-2xl">
-              <AlertTitle>Error</AlertTitle>
-              An Error occurred - See details below
-            </Alert>
-          )} */}
          <div className="mb-2 w-full max-w-2xl">
            {isLoading && (
-              <LoadingOverlay
-                title={"Loading VM Configuration"}
-                subtitle={<FlakeBadge flakeUrl={url} flakeAttr={url} />}
-              />
+              <LoadingOverlay title={"Loading VM Configuration"} subtitle="" />
            )}

            <ConfigureVM formHooks={formHooks} setVmUuid={setVmUuid} />
-
-            {/* {error && (
-              <>
-                <Button
-                  color="error"
-                  fullWidth
-                  variant="contained"
-                  onClick={handleBack}
-                  className="my-2"
-                >
-                  Back
-                </Button>
-                <Log
-                  title="Log"
-                  lines={
-                    error?.response?.data?.detail
-                      ?.map((err, idx) => err.msg.split("\n"))
-                      ?.flat()
-                      .filter(Boolean) || []
-                  }
-                />
-              </>
-            )} */}
          </div>
        </>
      )}
--- a/pkgs/ui/src/components/join/loadingOverlay.tsx
+++ b/pkgs/ui/src/components/join/loadingOverlay.tsx
@ -1,18 +1,27 @@
 "use client";
-import { LinearProgress, Typography } from "@mui/material";
+import { CircularProgress, LinearProgress, Typography } from "@mui/material";

 interface LoadingOverlayProps {
  title: React.ReactNode;
  subtitle: React.ReactNode;
+  variant?: "linear" | "circle";
 }
 export const LoadingOverlay = (props: LoadingOverlayProps) => {
-  const { title, subtitle } = props;
+  const { title, subtitle, variant = "linear" } = props;
  return (
    <div className="w-full">
-      <Typography variant="subtitle2">{title}</Typography>
-      <LinearProgress className="mb-2 w-full" />
-      <div className="grid w-full place-items-center">{subtitle}</div>
-      <Typography variant="subtitle1"></Typography>
+      <div className="grid w-full place-items-center">
+        <Typography variant="subtitle1">{title}</Typography>
+      </div>
+      <div className="grid w-full place-items-center">
+        <Typography variant="subtitle2">{subtitle}</Typography>
+      </div>
+      {variant === "linear" && <LinearProgress className="my-2 w-full" />}
+      {variant === "circle" && (
+        <div className="grid w-full place-items-center">
+          <CircularProgress className="my-2 w-full" />
+        </div>
+      )}
    </div>
  );
 };
--- a/pkgs/ui/src/components/join/vmBuildLogs.tsx
+++ b/pkgs/ui/src/components/join/vmBuildLogs.tsx
@ -9,11 +9,7 @@ interface VmBuildLogsProps {
 export const VmBuildLogs = (props: VmBuildLogsProps) => {
  const { vmUuid } = props;

-  const {
-    data: logs,
-    isLoading,
-    error,
-  } = useGetVmLogs(vmUuid as string, {
+  const { data: logs, isLoading } = useGetVmLogs(vmUuid as string, {
    swr: {
      enabled: vmUuid !== null,
    },
--- a/pkgs/ui/src/components/sidebar/index.tsx
+++ b/pkgs/ui/src/components/sidebar/index.tsx
@ -1,17 +1,14 @@
 import {
-  Alert,
  Divider,
-  Icon,
  IconButton,
  List,
  ListItem,
  ListItemButton,
  ListItemIcon,
  ListItemText,
-  Snackbar,
 } from "@mui/material";
 import Image from "next/image";
-import { ReactNode, useState } from "react";
+import { ReactNode } from "react";

 import DashboardIcon from "@mui/icons-material/Dashboard";
 import DevicesIcon from "@mui/icons-material/Devices";
@ -29,7 +26,7 @@ type MenuEntry = {
  icon: ReactNode;
  label: string;
  to: string;
-  missing: boolean;
+  disabled: boolean;
 } & {
  subMenuEntries?: MenuEntry[];
 };
@ -39,37 +36,37 @@ const menuEntries: MenuEntry[] = [
    icon: <DashboardIcon />,
    label: "Dashoard",
    to: "/",
-    missing: false,
+    disabled: false,
  },
  {
    icon: <DevicesIcon />,
    label: "Machines",
    to: "/machines",
-    missing: false,
+    disabled: false,
  },
  {
    icon: <AppsIcon />,
    label: "Applications",
    to: "/applications",
-    missing: true,
+    disabled: true,
  },
  {
    icon: <LanIcon />,
    label: "Network",
    to: "/network",
-    missing: true,
+    disabled: true,
  },
  {
    icon: <DesignServicesIcon />,
    label: "Templates",
    to: "/templates",
-    missing: false,
+    disabled: false,
  },
  {
    icon: <BackupIcon />,
    label: "Backups",
    to: "/backups",
-    missing: true,
+    disabled: true,
  },
 ];

@ -83,22 +80,6 @@ interface SidebarProps {
 export function Sidebar(props: SidebarProps) {
  const { show, onClose } = props;

-  const [open, setOpen] = React.useState(false);
-  const handleClick = () => {
-    setOpen(true);
-  };
-
-  const handleClose = (
-    event?: React.SyntheticEvent | Event,
-    reason?: string,
-  ) => {
-    if (reason === "clickaway") {
-      return;
-    }
-
-    setOpen(false);
-  };
-
  return (
    <aside
      className={tw`${
@ -137,10 +118,8 @@ export function Sidebar(props: SidebarProps) {
                <ListItemButton
                  className="justify-center lg:justify-normal"
                  LinkComponent={Link}
-                  href={menuEntry.missing ? "" : menuEntry.to}
-                  onClickCapture={
-                    menuEntry.missing ? () => handleClick() : undefined
-                  }
+                  href={menuEntry.to}
+                  disabled={menuEntry.disabled}
                >
                  <ListItemIcon
                    color="inherit"
@ -160,12 +139,6 @@ export function Sidebar(props: SidebarProps) {
            );
          })}
        </List>
-
-        <Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>
-          <Alert onClose={handleClose} severity="error" sx={{ width: "100%" }}>
-            Site does not exist yet
-          </Alert>
-        </Snackbar>
        <Divider flexItem className="mx-8 my-10 hidden bg-zinc-600 lg:block" />
        <div className="mx-auto mb-8 hidden w-full max-w-xs rounded-sm px-4 py-6 text-center align-bottom shadow-sm lg:block">
          <h3 className="mb-2 w-full font-semibold text-white">
--- a/pkgs/ui/src/data/nodeData.tsx
+++ b/pkgs/ui/src/data/nodeData.tsx
@ -15,7 +15,7 @@ export type NodeStatusKeys = (typeof NodeStatus)[keyof typeof NodeStatus];
 function createData(
  name: string,
  status: NodeStatusKeys,
-  last_seen: number,
+  last_seen: number
 ): TableData {
  if (status == NodeStatus.Online) {
    last_seen = 0;
@ -58,20 +58,20 @@ function getRandomName(): string {
 }

 // A function to generate random IPv6 addresses
-function getRandomId(): string {
-  let hex = "0123456789abcdef";
-  let id = "";
-  for (let i = 0; i < 8; i++) {
-    for (let j = 0; j < 4; j++) {
-      let index = Math.floor(Math.random() * hex.length);
-      id += hex[index];
-    }
-    if (i < 7) {
-      id += ":";
-    }
-  }
-  return id;
-}
+// function getRandomId(): string {
+//   let hex = "0123456789abcdef";
+//   let id = "";
+//   for (let i = 0; i < 8; i++) {
+//     for (let j = 0; j < 4; j++) {
+//       let index = Math.floor(Math.random() * hex.length);
+//       id += hex[index];
+//     }
+//     if (i < 7) {
+//       id += ":";
+//     }
+//   }
+//   return id;
+// }

 // A function to generate random status keys
 function getRandomStatus(): NodeStatusKeys {
@ -96,61 +96,61 @@ export const tableData = [
    "Matchbox",

    NodeStatus.Pending,
-    0,
+    0
  ),
  createData(
    "Ahorn",

    NodeStatus.Online,
-    0,
+    0
  ),
  createData(
    "Yellow",

    NodeStatus.Offline,
-    16.0,
+    16.0
  ),
  createData(
    "Rauter",

    NodeStatus.Offline,
-    6.0,
+    6.0
  ),
  createData(
    "Porree",

    NodeStatus.Offline,
-    13,
+    13
  ),
  createData(
    "Helsinki",

    NodeStatus.Online,
-    0,
+    0
  ),
  createData(
    "Kelle",

    NodeStatus.Online,
-    0,
+    0
  ),
  createData(
    "Shodan",

    NodeStatus.Online,
-    0.0,
+    0.0
  ),
  createData(
    "Qubasa",

    NodeStatus.Offline,
-    7.0,
+    7.0
  ),
  createData(
    "Green",

    NodeStatus.Offline,
-    2,
+    2
  ),
  createData("Gum", NodeStatus.Offline, 0),
  createData("Xu", NodeStatus.Online, 0),
@ -158,7 +158,7 @@ export const tableData = [
    "Zaatar",

    NodeStatus.Online,
-    0,
+    0
  ),
 ];

--- a/pkgs/ui/src/views/joinPrequel.tsx
+++ b/pkgs/ui/src/views/joinPrequel.tsx
@ -1,15 +1,9 @@
 "use client";
 import React from "react";
-import {
-  FormControl,
-  FormHelperText,
-  IconButton,
-  Input,
-  InputAdornment,
-} from "@mui/material";
+import { IconButton, Input, InputAdornment } from "@mui/material";
 import { useSearchParams } from "next/navigation";

-import { useForm, SubmitHandler, Controller } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 import { Confirm } from "@/components/join/confirm";
 import { Layout } from "@/components/join/layout";
 import { ChevronRight } from "@mui/icons-material";
@ -21,6 +15,7 @@ type FormValues = {
 export default function JoinPrequel() {
  const queryParams = useSearchParams();
  const flakeUrl = queryParams.get("flake") || "";
+  const flakeAttr = queryParams.get("attr") || "default";
  const { handleSubmit, control, formState, getValues, reset } =
    useForm<FormValues>({ defaultValues: { flakeUrl: "" } });

@ -60,6 +55,7 @@ export default function JoinPrequel() {
        <Confirm
          handleBack={() => reset()}
          flakeUrl={formState.isSubmitted ? getValues("flakeUrl") : flakeUrl}
+          flakeAttr={flakeAttr}
        />
      )}
    </Layout>
--- a/pkgs/ui/tsconfig.json
+++ b/pkgs/ui/tsconfig.json
@ -14,6 +14,7 @@
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
+    "noUnusedLocals": true,
    "plugins": [
      {
        "name": "next"