fix frontend
This commit is contained in:
parent
032cdd731a
commit
5c9f826a23
@ -18438,4 +18438,4 @@
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,10 @@
|
||||
import { MachineContextProvider } from "@/components/hooks/useMachines";
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return <MachineContextProvider>{children}</MachineContextProvider>;
|
||||
return (
|
||||
// TODO: select flake?
|
||||
<MachineContextProvider flakeName="defaultFlake">
|
||||
{children}
|
||||
</MachineContextProvider>
|
||||
);
|
||||
}
|
||||
|
@ -2,9 +2,6 @@
|
||||
|
||||
import { NodeTable } from "@/components/table";
|
||||
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<NodeTable />
|
||||
);
|
||||
return <NodeTable />;
|
||||
}
|
||||
|
@ -33,7 +33,10 @@ interface PureCustomConfigProps extends FormStepContentProps {
|
||||
}
|
||||
export function CustomConfig(props: FormStepContentProps) {
|
||||
const { formHooks } = props;
|
||||
const { data, isLoading, error } = useGetMachineSchema("mama");
|
||||
const { data, isLoading, error } = useGetMachineSchema(
|
||||
"defaultFlake",
|
||||
"mama",
|
||||
);
|
||||
// const { data, isLoading, error } = { data: {data:{schema: {
|
||||
// title: 'Test form',
|
||||
// type: 'object',
|
||||
@ -53,11 +56,11 @@ export function CustomConfig(props: FormStepContentProps) {
|
||||
return {};
|
||||
}, [data, isLoading, error]);
|
||||
|
||||
type ValueType = { default: any };
|
||||
const initialValues = useMemo(
|
||||
() =>
|
||||
Object.entries(schema?.properties || {}).reduce((acc, [key, value]) => {
|
||||
/*@ts-ignore*/
|
||||
const init: any = value?.default;
|
||||
const init: any = (value as ValueType)?.default;
|
||||
if (init) {
|
||||
return {
|
||||
...acc,
|
||||
@ -157,7 +160,7 @@ function PureCustomConfig(props: PureCustomConfigProps) {
|
||||
// ObjectFieldTemplate:
|
||||
ErrorListTemplate: ErrorList,
|
||||
ButtonTemplates: {
|
||||
SubmitButton: (props) => (
|
||||
SubmitButton: () => (
|
||||
<div className="flex w-full items-center justify-center">
|
||||
<Button
|
||||
onClick={validate}
|
||||
|
@ -113,7 +113,7 @@ export function CreateMachineForm() {
|
||||
)}
|
||||
{!isMobile && (
|
||||
<Stepper activeStep={activeStep} color="secondary">
|
||||
{steps.map(({ label }, index) => {
|
||||
{steps.map(({ label }) => {
|
||||
const stepProps: { completed?: boolean } = {};
|
||||
const labelProps: {
|
||||
optional?: React.ReactNode;
|
||||
|
@ -2,10 +2,10 @@ import { useListMachines } from "@/api/default/default";
|
||||
import { MachinesResponse } from "@/api/model";
|
||||
import { AxiosError, AxiosResponse } from "axios";
|
||||
import React, {
|
||||
createContext,
|
||||
Dispatch,
|
||||
ReactNode,
|
||||
SetStateAction,
|
||||
createContext,
|
||||
useState,
|
||||
} from "react";
|
||||
import { KeyedMutator } from "swr";
|
||||
@ -38,7 +38,7 @@ interface AppContextProviderProps {
|
||||
}
|
||||
export const WithAppState = (props: AppContextProviderProps) => {
|
||||
const { children } = props;
|
||||
const { isLoading, error, mutate, swrKey } = useListMachines();
|
||||
const { isLoading, error, mutate, swrKey } = useListMachines("defaultFlake");
|
||||
|
||||
const [data, setAppState] = useState<AppState>({ isJoined: false });
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export function useDebounce(value: any, delay: number) {
|
||||
const [debouncedValue, setDebouncedValue] = useState(value);
|
||||
export function useDebounce<T>(value: T, delay: number) {
|
||||
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
|
@ -44,7 +44,6 @@ const initialState = {
|
||||
data: [],
|
||||
} as const;
|
||||
|
||||
|
||||
export function CreateMachineContext(flakeName: string) {
|
||||
return useMemo(() => {
|
||||
return createContext<MachineContextType>({
|
||||
@ -106,4 +105,5 @@ export const MachineContextProvider = (props: MachineContextProviderProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const useMachines = (flakeName: string) => React.useContext(CreateMachineContext(flakeName));
|
||||
export const useMachines = (flakeName: string) =>
|
||||
React.useContext(CreateMachineContext(flakeName));
|
||||
|
@ -16,7 +16,7 @@ import { SearchBar } from "./searchBar";
|
||||
import { StickySpeedDial } from "./stickySpeedDial";
|
||||
|
||||
export function NodeTable() {
|
||||
const machines = useMachines();
|
||||
const machines = useMachines("defaultFlake");
|
||||
const theme = useTheme();
|
||||
const is_xs = useMediaQuery(theme.breakpoints.only("xs"));
|
||||
|
||||
|
@ -1,11 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { SetStateAction, Dispatch, useState, useEffect, useMemo } from "react";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
import { useDebounce } from "../hooks/useDebounce";
|
||||
import { Autocomplete, InputAdornment, TextField } from "@mui/material";
|
||||
import { Machine } from "@/api/model/machine";
|
||||
import SearchIcon from "@mui/icons-material/Search";
|
||||
import { Autocomplete, InputAdornment, TextField } from "@mui/material";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
|
||||
import { useDebounce } from "../hooks/useDebounce";
|
||||
|
||||
export interface SearchBarProps {
|
||||
tableData: readonly Machine[];
|
||||
@ -13,7 +13,7 @@ export interface SearchBarProps {
|
||||
}
|
||||
|
||||
export function SearchBar(props: SearchBarProps) {
|
||||
let { tableData, setFilteredList } = props;
|
||||
const { tableData, setFilteredList } = props;
|
||||
const [search, setSearch] = useState<string>("");
|
||||
const debouncedSearch = useDebounce(search, 250);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
@ -28,11 +28,11 @@ function createData(
|
||||
};
|
||||
}
|
||||
|
||||
var nameNumber = 0;
|
||||
let nameNumber = 0;
|
||||
|
||||
// A function to generate random names
|
||||
function getRandomName(): string {
|
||||
let names = [
|
||||
const names = [
|
||||
"Alice",
|
||||
"Bob",
|
||||
"Charlie",
|
||||
@ -53,7 +53,7 @@ function getRandomName(): string {
|
||||
"Wendy",
|
||||
"Zoe",
|
||||
];
|
||||
let index = Math.floor(Math.random() * names.length);
|
||||
const index = Math.floor(Math.random() * names.length);
|
||||
return names[index] + nameNumber++;
|
||||
}
|
||||
|
||||
@ -75,8 +75,12 @@ function getRandomName(): string {
|
||||
|
||||
// A function to generate random status keys
|
||||
function getRandomStatus(): NodeStatusKeys {
|
||||
let statusKeys = [NodeStatus.Online, NodeStatus.Offline, NodeStatus.Pending];
|
||||
let index = Math.floor(Math.random() * statusKeys.length);
|
||||
const statusKeys = [
|
||||
NodeStatus.Online,
|
||||
NodeStatus.Offline,
|
||||
NodeStatus.Pending,
|
||||
];
|
||||
const index = Math.floor(Math.random() * statusKeys.length);
|
||||
return statusKeys[index];
|
||||
}
|
||||
|
||||
@ -85,8 +89,8 @@ function getRandomLastSeen(status: NodeStatusKeys): number {
|
||||
if (status === "online") {
|
||||
return 0;
|
||||
} else {
|
||||
let min = 1; // One day ago
|
||||
let max = 360; // One year ago
|
||||
const min = 1; // One day ago
|
||||
const max = 360; // One year ago
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
}
|
||||
}
|
||||
@ -164,12 +168,12 @@ export const tableData = [
|
||||
|
||||
// A function to execute the createData function with dummy data in a loop 100 times and return an array
|
||||
export function executeCreateData(): TableData[] {
|
||||
let result: TableData[] = [];
|
||||
const result: TableData[] = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
// Generate dummy data
|
||||
let name = getRandomName();
|
||||
let status = getRandomStatus();
|
||||
let last_seen = getRandomLastSeen(status);
|
||||
const name = getRandomName();
|
||||
const status = getRandomStatus();
|
||||
const last_seen = getRandomLastSeen(status);
|
||||
|
||||
// Call the createData function and push the result to the array
|
||||
result.push(createData(name, status, last_seen));
|
||||
|
@ -16,15 +16,16 @@ 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: "" } });
|
||||
const { control, formState, getValues, reset } = useForm<FormValues>({
|
||||
defaultValues: { flakeUrl: "" },
|
||||
});
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Suspense fallback="Loading">
|
||||
{!formState.isSubmitted && !flakeUrl && (
|
||||
<form
|
||||
onSubmit={handleSubmit(() => {})}
|
||||
// onSubmit={handleSubmit(() => {})}
|
||||
className="w-full max-w-2xl justify-self-center"
|
||||
>
|
||||
<Controller
|
||||
|
Loading…
Reference in New Issue
Block a user