UI: add create machine suggestion

This commit is contained in:
Johannes Kirschbauer
2024-08-26 16:30:44 +02:00
parent 0f5062fa45
commit 3b48dfd2e0
2 changed files with 70 additions and 55 deletions

View File

@@ -59,68 +59,73 @@ export function CreateMachine() {
}
};
return (
<div class="px-1">
<span class="px-2">Create new Machine</span>
<Form onSubmit={handleSubmit}>
<Field
name="machine.name"
validate={[required("This field is required")]}
>
{(field, props) => (
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"name"}
error={field.error}
required
/>
)}
</Field>
<Field name="machine.description">
{(field, props) => (
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"description"}
error={field.error}
/>
)}
</Field>
<Field name="machine.deploy.targetHost">
{(field, props) => (
<>
<div class="flex w-full justify-center">
<div class="mt-4 w-full max-w-3xl self-stretch px-2">
<span class="px-2">Create new Machine</span>
<Form onSubmit={handleSubmit}>
<Field
name="machine.name"
validate={[required("This field is required")]}
>
{(field, props) => (
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"Deployment target"}
label={"name"}
error={field.error}
required
/>
)}
</Field>
<Field name="machine.description">
{(field, props) => (
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"description"}
error={field.error}
/>
</>
)}
</Field>
<button
class="btn btn-error float-right"
type="submit"
classList={{
"btn-disabled": formStore.submitting,
}}
>
<Switch
fallback={
)}
</Field>
<Field name="machine.deploy.targetHost">
{(field, props) => (
<>
<span class="loading loading-spinner loading-sm"></span>Creating
<TextInput
inputProps={props}
formStore={formStore}
value={`${field.value}`}
label={"Deployment target"}
error={field.error}
/>
</>
}
>
<Match when={!formStore.submitting}>
<span class="material-icons">add</span>Create
</Match>
</Switch>
</button>
</Form>
)}
</Field>
<div class="mt-12 flex justify-end">
<button
class="btn btn-primary"
type="submit"
classList={{
"btn-disabled": formStore.submitting,
}}
>
<Switch
fallback={
<>
<span class="loading loading-spinner loading-sm"></span>
Creating
</>
}
>
<Match when={!formStore.submitting}>
<span class="material-icons">add</span>Create
</Match>
</Switch>
</button>
</div>
</Form>
</div>
</div>
);
}

View File

@@ -113,7 +113,17 @@ export const MachineListView: Component = () => {
nixOnlyMachines()?.length === 0
}
>
No machines found
<div class="mt-8 flex w-full flex-col items-center justify-center gap-2">
<span class="text-lg text-neutral">
No machines defined yet. Click below to define one.
</span>
<button
class="btn btn-square btn-ghost size-28 overflow-hidden p-2"
onClick={() => navigate("/machines/create")}
>
<span class="material-icons text-6xl font-light">add</span>
</button>
</div>
</Match>
<Match when={!inventoryQuery.isLoading}>
<ul>