machine-details: updates form layout
This commit is contained in:
Timo
committed by
Johannes Kirschbauer
Johannes Kirschbauer
parent
3898f2f449
commit
b9bd2b3729
@@ -26,6 +26,7 @@ import { DiskStep, DiskValues } from "./install/disk-step";
|
|||||||
import { SummaryStep } from "./install/summary-step";
|
import { SummaryStep } from "./install/summary-step";
|
||||||
import cx from "classnames";
|
import cx from "classnames";
|
||||||
import { VarsStep, VarsValues } from "./install/vars-step";
|
import { VarsStep, VarsValues } from "./install/vars-step";
|
||||||
|
import Fieldset from "@/src/Form/fieldset";
|
||||||
|
|
||||||
type MachineFormInterface = MachineData & {
|
type MachineFormInterface = MachineData & {
|
||||||
sshKey?: File;
|
sshKey?: File;
|
||||||
@@ -519,83 +520,71 @@ const MachineForm = (props: MachineDetailsProps) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div class="flex flex-col gap-6 p-4">
|
<div class="flex flex-col gap-6">
|
||||||
<span class="mb-2 flex w-full justify-center">
|
<div class="sticky top-0 flex items-center justify-end gap-2 bg-secondary-50 border-b border-secondary-100 py-2 px-4">
|
||||||
<MachineAvatar name={machineName()} />
|
<div class="flex gap-3 items-center">
|
||||||
</span>
|
<div class="w-fit" data-tip="Machine must be online">
|
||||||
<Form onSubmit={handleSubmit} class="flex flex-col gap-6">
|
{/* <Button
|
||||||
<Field name="machine.name">
|
class="w-full"
|
||||||
{(field, props) => (
|
size="s"
|
||||||
<TextInput
|
// disabled={!online()}
|
||||||
inputProps={props}
|
onClick={() => {
|
||||||
label="Name"
|
setInstallModalOpen(true);
|
||||||
value={field.value ?? ""}
|
}}
|
||||||
error={field.error}
|
endIcon={<Icon icon="Flash" />}
|
||||||
class="col-span-2"
|
>
|
||||||
required
|
Install
|
||||||
/>
|
</Button> */}
|
||||||
)}
|
</div>
|
||||||
</Field>
|
{/* <Typography hierarchy="label" size="default">
|
||||||
<Field name="machine.tags" type="string[]">
|
Installs the system for the first time. Used to bootstrap the
|
||||||
{(field, props) => (
|
remote device.
|
||||||
<>
|
</Typography> */}
|
||||||
<FieldLayout
|
</div>
|
||||||
label={<InputLabel>Tags</InputLabel>}
|
<div class="flex gap-3 items-center">
|
||||||
field={
|
<div class="button-group flex">
|
||||||
<span class="col-span-10">
|
<Button
|
||||||
<For each={field.value}>
|
variant="light"
|
||||||
{(tag) => (
|
class="w-full"
|
||||||
<span class="mx-2 w-fit rounded-full px-3 py-1 bg-inv-4 fg-inv-1">
|
size="s"
|
||||||
{tag}
|
onClick={() => {
|
||||||
</span>
|
setInstallModalOpen(true);
|
||||||
)}
|
}}
|
||||||
</For>
|
endIcon={<Icon icon="Flash" />}
|
||||||
</span>
|
>
|
||||||
}
|
Install
|
||||||
/>
|
</Button>
|
||||||
</>
|
<Button
|
||||||
)}
|
variant="light"
|
||||||
</Field>
|
class="w-full"
|
||||||
<Field name="machine.description">
|
size="s"
|
||||||
{(field, props) => (
|
onClick={() => handleUpdate()}
|
||||||
<TextInput
|
endIcon={<Icon icon="Update" />}
|
||||||
inputProps={props}
|
>
|
||||||
label="Description"
|
Update
|
||||||
value={field.value ?? ""}
|
</Button>
|
||||||
error={field.error}
|
</div>
|
||||||
class="col-span-2"
|
<div class=" w-fit" data-tip="Machine must be online"></div>
|
||||||
required
|
{/* <Typography hierarchy="label" size="default">
|
||||||
/>
|
Update the system if changes should be synced after the
|
||||||
)}
|
installation process.
|
||||||
</Field>
|
</Typography> */}
|
||||||
<Field name="hw_config">
|
</div>
|
||||||
{(field, props) => (
|
</div>
|
||||||
<FieldLayout
|
<div class="p-4">
|
||||||
label={<InputLabel>Hardware Configuration</InputLabel>}
|
<span class="mb-2 flex w-full justify-center">
|
||||||
field={<span>{field.value || "None"}</span>}
|
<MachineAvatar name={machineName()} />
|
||||||
/>
|
</span>
|
||||||
)}
|
<Form
|
||||||
</Field>
|
onSubmit={handleSubmit}
|
||||||
<Field name="disk_schema.schema_name">
|
class="mx-auto flex w-full max-w-2xl flex-col gap-y-6"
|
||||||
{(field, props) => (
|
>
|
||||||
<>
|
<Fieldset legend="General">
|
||||||
<FieldLayout
|
<Field name="machine.name">
|
||||||
label={<InputLabel>Disk schema</InputLabel>}
|
|
||||||
field={<span>{field.value || "None"}</span>}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
|
|
||||||
<div class=" col-span-full" tabindex="0">
|
|
||||||
<input type="checkbox" />
|
|
||||||
<div class=" px-0 text-xl ">Connection Settings</div>
|
|
||||||
<div class="">
|
|
||||||
<Field name="machine.deploy.targetHost">
|
|
||||||
{(field, props) => (
|
{(field, props) => (
|
||||||
<TextInput
|
<TextInput
|
||||||
inputProps={props}
|
inputProps={props}
|
||||||
label="Target Host"
|
label="Name"
|
||||||
value={field.value ?? ""}
|
value={field.value ?? ""}
|
||||||
error={field.error}
|
error={field.error}
|
||||||
class="col-span-2"
|
class="col-span-2"
|
||||||
@@ -603,73 +592,105 @@ const MachineForm = (props: MachineDetailsProps) => {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Field>
|
</Field>
|
||||||
</div>
|
<Field name="machine.description">
|
||||||
</div>
|
{(field, props) => (
|
||||||
|
<TextInput
|
||||||
|
inputProps={props}
|
||||||
|
label="Description"
|
||||||
|
value={field.value ?? ""}
|
||||||
|
error={field.error}
|
||||||
|
class="col-span-2"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
<Field name="machine.tags" type="string[]">
|
||||||
|
{(field, props) => (
|
||||||
|
<div class="flex gap-4 items-center">
|
||||||
|
<Typography hierarchy="label" size="default" weight="bold">
|
||||||
|
Tags{" "}
|
||||||
|
</Typography>
|
||||||
|
<For each={field.value}>
|
||||||
|
{(tag) => (
|
||||||
|
<span class="mx-2 w-fit rounded-full px-3 py-0.5 bg-inv-4 fg-inv-1">
|
||||||
|
<Typography
|
||||||
|
hierarchy="label"
|
||||||
|
size="s"
|
||||||
|
inverted={true}
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</Typography>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
</Fieldset>
|
||||||
|
|
||||||
{
|
<Fieldset legend="Hardware">
|
||||||
<div class=" col-span-full justify-end">
|
<Field name="hw_config">
|
||||||
|
{(field, props) => (
|
||||||
|
<FieldLayout
|
||||||
|
label={<InputLabel>Hardware Configuration</InputLabel>}
|
||||||
|
field={<span>{field.value || "None"}</span>}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
<Field name="disk_schema.schema_name">
|
||||||
|
{(field, props) => (
|
||||||
|
<>
|
||||||
|
<FieldLayout
|
||||||
|
label={<InputLabel>Disk schema</InputLabel>}
|
||||||
|
field={<span>{field.value || "None"}</span>}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<div class=" col-span-full" tabindex="0">
|
||||||
|
<input type="checkbox" />
|
||||||
|
<div class=" px-0 text-xl ">Connection Settings</div>
|
||||||
|
<div class="">
|
||||||
|
<Field name="machine.deploy.targetHost">
|
||||||
|
{(field, props) => (
|
||||||
|
<TextInput
|
||||||
|
inputProps={props}
|
||||||
|
label="Target Host"
|
||||||
|
value={field.value ?? ""}
|
||||||
|
error={field.error}
|
||||||
|
class="col-span-2"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Fieldset>
|
||||||
|
|
||||||
|
<footer class="flex justify-end gap-y-3 border-t border-secondary-200 pt-5">
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={formStore.submitting || !formStore.dirty}
|
disabled={formStore.submitting || !formStore.dirty}
|
||||||
>
|
>
|
||||||
Save
|
Update Edits
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</footer>
|
||||||
}
|
</Form>
|
||||||
</Form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="">
|
|
||||||
<div class=""></div>
|
|
||||||
|
|
||||||
<span class="text-xl text-primary-800">Actions</span>
|
|
||||||
<div class="my-4 flex flex-col gap-6">
|
|
||||||
<span class="max-w-md">
|
|
||||||
Installs the system for the first time. Used to bootstrap the remote
|
|
||||||
device.
|
|
||||||
</span>
|
|
||||||
<div class=" w-fit" data-tip="Machine must be online">
|
|
||||||
<Button
|
|
||||||
class="w-full"
|
|
||||||
// disabled={!online()}
|
|
||||||
onClick={() => {
|
|
||||||
setInstallModalOpen(true);
|
|
||||||
}}
|
|
||||||
endIcon={<Icon icon="Flash" />}
|
|
||||||
>
|
|
||||||
Install
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Modal
|
|
||||||
title={`Install machine`}
|
|
||||||
open={installModalOpen()}
|
|
||||||
handleClose={() => setInstallModalOpen(false)}
|
|
||||||
class="min-w-[600px]"
|
|
||||||
>
|
|
||||||
<InstallMachine
|
|
||||||
name={machineName()}
|
|
||||||
targetHost={getValue(formStore, "machine.deploy.targetHost")}
|
|
||||||
machine={props.initialData}
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
|
|
||||||
<span class="max-w-md">
|
|
||||||
Update the system if changes should be synced after the installation
|
|
||||||
process.
|
|
||||||
</span>
|
|
||||||
<div class=" w-fit" data-tip="Machine must be online">
|
|
||||||
<Button
|
|
||||||
class="w-full"
|
|
||||||
// disabled={!online()}
|
|
||||||
onClick={() => handleUpdateButton()}
|
|
||||||
endIcon={<Icon icon="Update" />}
|
|
||||||
>
|
|
||||||
Update
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
title={`Install machine`}
|
||||||
|
open={installModalOpen()}
|
||||||
|
handleClose={() => setInstallModalOpen(false)}
|
||||||
|
class="min-w-[600px]"
|
||||||
|
>
|
||||||
|
<InstallMachine
|
||||||
|
name={machineName()}
|
||||||
|
targetHost={getValue(formStore, "machine.deploy.targetHost")}
|
||||||
|
machine={props.initialData}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user