Verified Commit 7459291f authored by Hines, Jesse's avatar Hines, Jesse
Browse files

Update forms to use new RAPS config

parent 0b10c104

src/components/shared/dropdown.tsx

+4 −4
Original line number Diff line number Diff line
@@ -7,7 +7,7 @@ export interface SelectProps extends HTMLProps<HTMLSelectElement> { 
  onChange: (e: ChangeEvent<HTMLSelectElement>) => void;

}



export function Select(props: SelectProps) {

export function Select({onChange, value, choices, ...props}: SelectProps) {

  return (

    <div className={`flex flex-col ${props.label ? "h-20" : "h-11"}`}>

      {props.label && (
@@ -15,8 +15,8 @@ export function Select(props: SelectProps) { 
      )}

      <select

        {...props}

        onChange={props.onChange}

        value={props.value}

        onChange={onChange}

        value={value}

        className={

          props.className +

          " flex-1 cursor-pointer border-b-2 border-neutral-400 bg-transparent px-2 py-2 transition-colors duration-300 ease-in-out hover:border-blue-500 focus:border-blue-500 focus:outline-none dark:text-neutral-200"
@@ -25,7 +25,7 @@ export function Select(props: SelectProps) { 
        <option disabled value="">

          {props.placeholder}

        </option>

        {props.choices.map((choice) => (

        {choices.map((choice) => (

          <option

            key={choice.value}

            value={choice.value}

src/components/shared/textArea.tsx

0 → 100644
+30 −0
Original line number Diff line number Diff line 
import { HTMLProps } from "react";



export interface TextAreaProps extends HTMLProps<HTMLTextAreaElement> {

  label?: string;

  labelAlignment?: "vertical" | "horizontal";

  error?: string;

}



export function TextArea({labelAlignment, ...props}: TextAreaProps) {

  return (

    <div

      className={`${labelAlignment === "horizontal" ? "flex flex-row items-center" : "flex flex-col"} gap-2 ${props.className}`}

    >

      {props.label && (

        <label className="pl-3 dark:text-neutral-200">

          {props.label}

        </label>

      )}

      <textarea

        {...props}

        className="flex-1 border-2 border-neutral-400 bg-transparent px-2 py-2 transition-colors duration-300 hover:border-blue-500 focus:border-blue-500 focus:outline-none dark:text-neutral-200"

        onChange={props.onChange}

        value={props.value}

      />

      {props.error && (

        <span className="text-red-600">{props.error}</span>

      )}

    </div>

  );

}

src/components/simulations/basicSettings.form.tsx

+13 −10
Original line number Diff line number Diff line 
import { addMinutes } from "date-fns";

import { SimulationRequest } from "../../models/SimulationRequest.model";

import { SimulationConfig } from "../../models/SimulationConfig.model";

import { SharedDatePicker } from "../shared/datepicker";

import { Select } from "../shared/dropdown";

import { useQuery } from "@tanstack/react-query";

import { getSystems } from "../../util/queryOptions";

import { LoadingSpinner } from "../shared/loadingSpinner";



export function BasicSettingsForm({

  form,

  setForm,

}: {

  form: SimulationRequest;

  setForm: (form: SimulationRequest) => void;

  form: SimulationConfig;

  setForm: (form: SimulationConfig) => void;

}) {

  const { data: systems } = useQuery(getSystems());

  if (!systems) {

    return <LoadingSpinner/>

  }



  return (

    <>

      <SharedDatePicker

        label="Start Date"

        onChange={(newDate) => {

          if (newDate) {

          if (newDate && new Date(newDate) >= new Date(form.end)) {

            const endDate = addMinutes(newDate, 60).toISOString();

            setForm({ ...form, start: newDate, end: endDate });

          }
@@ -33,12 +41,7 @@ export function BasicSettingsForm({ 
      />

      <Select

        label="System"

        choices={[

          { label: "Frontier", value: "frontier" },

          { label: "Fugaku", value: "fugaku" },

          { label: "Marconi 100", value: "marconi100" },

          { label: "Lassen", value: "lassen" },

        ]}

        choices={systems.map(system => ({ label: system.name, value: system.name }))}

        value={form.system}

        onChange={(e) => {

          setForm({

src/components/simulations/cooling.form.tsx

+15 −5
Original line number Diff line number Diff line 
import { ChangeEvent } from "react";

import { SimulationRequest } from "../../models/SimulationRequest.model";

import { SimulationConfig } from "../../models/SimulationConfig.model";

import { Checkbox } from "../shared/checkbox";



export function CoolingForm(props: {

  form: SimulationRequest;

  setForm: (form: SimulationRequest) => void;

  form: SimulationConfig;

  setForm: (form: SimulationConfig) => void;

}) {

  return (

    <>

      <Checkbox

        label="Enabled"

        checked={props.form.cooling.enabled}

        checked={props.form.cooling}

        onChange={(e: ChangeEvent<HTMLInputElement>) => {

          props.setForm({

            ...props.form,

            cooling: { ...props.form.cooling, enabled: e.target.checked },

            cooling: e.target.checked,

          });

        }}

      />

      <Checkbox

        label="Weather"

        checked={props.form.weather}

        onChange={(e: ChangeEvent<HTMLInputElement>) => {

          props.setForm({

            ...props.form,

            weather: e.target.checked,

          });

        }}

      />

src/components/simulations/list/SimulationsDataGridRow.tsx

+1 −1
Original line number Diff line number Diff line
@@ -48,7 +48,7 @@ export function SimulationsDataGridRow({ 
      </div>

      <SimulationDataGridCell value={simulation.user} />

      <SimulationDataGridCell value={simulation.system} />

      <SimulationDataGridCell value={simulation.config.scheduler.jobs_mode} />

      <SimulationDataGridCell value={simulation.config.workload} />

      <SimulationDataGridCell value={formatDate(simulation.start)} />

      <SimulationDataGridCell value={formatDate(simulation.end)} />

      <SimulationDataGridCell