From 6ee907ff0981b7825502b55acdf6a32a3cc15bb5 Mon Sep 17 00:00:00 2001 From: Kamoltat Sirivadhna Date: Thu, 30 Nov 2023 10:57:33 -0500 Subject: [PATCH] src/pages/Schedule/index: UI facelift + improve logic 1. Rewrote the components with Material UI 2. Improved OnListener logics 3. Improved how we store data in useLocalStorage. Signed-off-by: Kamoltat Sirivadhna --- src/pages/Schedule/index.jsx | 345 ++++++++++++++++++----------------- 1 file changed, 175 insertions(+), 170 deletions(-) diff --git a/src/pages/Schedule/index.jsx b/src/pages/Schedule/index.jsx index a328779..481069c 100644 --- a/src/pages/Schedule/index.jsx +++ b/src/pages/Schedule/index.jsx @@ -1,125 +1,114 @@ -import React, { useState, useEffect } from "react"; -import Typography from "@mui/material/Typography"; +import { useEffect, useState } from 'react'; import { Helmet } from "react-helmet"; +import { useLocalStorage } from "usehooks-ts"; +import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; +import Fab from '@mui/material/Fab'; +import AddIcon from '@mui/icons-material/Add'; import DeleteIcon from "@mui/icons-material/Delete"; import LockIcon from "@mui/icons-material/Lock"; import LockOpenIcon from "@mui/icons-material/LockOpen"; -import { useLocalStorage } from "usehooks-ts"; +import Paper from '@mui/material/Paper'; +import TableContainer from '@mui/material/TableContainer'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import TableCell from '@mui/material/TableCell'; +import TableBody from '@mui/material/TableBody'; +import Table from '@mui/material/Table'; +import TextField from '@mui/material/TextField'; +import Select from '@mui/material/Select'; +import MenuItem from '@mui/material/MenuItem'; +import Checkbox from '@mui/material/Checkbox'; export default function Schedule() { - const predefinedKeyOptions = [ - "--ceph-repo", "--suite-repo", "--subset", - "--suite-branch", "--suite", "--limit", - "--repo", "--ceph-branch", "subset" - ]; - - const [inputValue, setInputValue] = useLocalStorage("inputValue", ""); - const [selectedKeyIndices, setSelectedKeyIndices] = useLocalStorage("selectedKeyIndices", []); - const [valueData, setValueData] = useLocalStorage("valueData", []); - const [hoveredRowIndex, setHoveredRowIndex] = useState(null); - const [checkedRows, setCheckedRows] = useLocalStorage("checkedRows", []); - const [rowLocks, setRowLocks] = useLocalStorage("rowLocks", Array(selectedKeyIndices.length).fill(false)); - const [keyLocks, setKeyLocks] = useLocalStorage("keyLocks", Array(selectedKeyIndices.length).fill(false)); - - const handleInputChange = (event) => { - setInputValue(event.target.value); - }; + const [keyOptions, setKeyOptions] = + useLocalStorage("keyOptions", [ + "--ceph", + "--ceph-repo", + "--suite-repo", + "--suite-branch", + "--suite", + "--subset", + "--machine", + "--filter", + "--distro", + "--rerun", + "--rerun-statuses", + "--limit", + "--priority", + "--force-priority" + ]); + + const [commandBarValue, setCommandBarValue] = useLocalStorage("commandBarValue", ""); + const [rowData, setRowData] = useLocalStorage("rowData", []); + const [rowCount, setRowCount] = useLocalStorage("rowCount", 0); const handleRun = () => { - updateCommand(checkedRows); + return false; }; const handleDryRun = () => { - updateCommand(checkedRows); + return false; }; - useEffect(() => { - updateCommand(checkedRows); - }, [selectedKeyIndices, valueData, checkedRows]); - const addNewRow = () => { - setSelectedKeyIndices([...selectedKeyIndices, 0]); - setValueData([...valueData, ""]); - setRowLocks([...rowLocks, false]); - setKeyLocks([...keyLocks, false]); + console.log("addNewRow"); + const updatedRowIndex = rowIndex + 1; + setRowIndex(updatedRowIndex); + const index = (updatedRowIndex % keyOptions.length); + console.log(index); + const object = { + key: keyOptions[index], + value: "", + lock: false, + checked: true, + } + const updatedRowData = [...rowData]; + updatedRowData.push(object); + setRowData(updatedRowData); }; const handleCheckboxChange = (index, event) => { - const newCheckedRows = [...checkedRows]; - + console.log("handleCheckboxChange"); + const newRowData = [...rowData]; if (event.target.checked) { - newCheckedRows.push(index); + newRowData[index].checked = true; } else { - const indexToRemove = newCheckedRows.indexOf(index); - if (indexToRemove !== -1) { - newCheckedRows.splice(indexToRemove, 1); - } + newRowData[index].checked = false; } - - setCheckedRows(newCheckedRows); - updateCommand(newCheckedRows); + setRowData(newRowData); }; const handleKeySelectChange = (index, event) => { - const updatedSelectedKeyIndices = [...selectedKeyIndices]; - updatedSelectedKeyIndices[index] = event.target.value; - setSelectedKeyIndices(updatedSelectedKeyIndices); - updateCommand(checkedRows); + console.log("handleKeySelectChange"); + const newRowData = [...rowData]; + newRowData[index].key = event.target.value; + setRowData(newRowData); + }; const handleValueChange = (index, event) => { - const updatedValueData = [...valueData]; - updatedValueData[index] = event.target.value; - setValueData(updatedValueData); - updateCommand(checkedRows); + console.log("handleValueChange"); + const newRowData = [...rowData]; + newRowData[index].value = event.target.value; + setRowData(newRowData); }; const handleDeleteRow = (index) => { - const updatedSelectedKeyIndices = [...selectedKeyIndices]; - updatedSelectedKeyIndices.splice(index, 1); - setSelectedKeyIndices(updatedSelectedKeyIndices); - - const updatedValueData = [...valueData]; - updatedValueData.splice(index, 1); - setValueData(updatedValueData); - - const newCheckedRows = checkedRows.filter((checkedIndex) => checkedIndex !== index); - setCheckedRows(newCheckedRows); - - const updatedRowLocks = [...rowLocks]; - updatedRowLocks.splice(index, 1); - setRowLocks(updatedRowLocks); - - const updatedKeyLocks = [...keyLocks]; - updatedKeyLocks.splice(index, 1); - setKeyLocks(updatedKeyLocks); - - updateCommand(newCheckedRows); + console.log("handleDeleteRow"); + let newRowData = [...rowData]; + newRowData.splice(index, 1) + console.log(newRowData); + setRowData(newRowData); + const updatedRowIndex = rowIndex - 1; + setRowIndex(updatedRowIndex); }; const toggleRowLock = (index) => { - const updatedRowLocks = [...rowLocks]; - updatedRowLocks[index] = !updatedRowLocks[index]; - setRowLocks(updatedRowLocks); - - const updatedKeyLocks = [...keyLocks]; - updatedKeyLocks[index] = !updatedKeyLocks[index]; - setKeyLocks(updatedKeyLocks); - }; - - const updateCommand = (checkedRows) => { - const commandArgs = checkedRows - .map((index) => { - const selectedKeyIndex = selectedKeyIndices[index]; - const selectedKey = predefinedKeyOptions[selectedKeyIndex]; - const selectedValue = valueData[index]; - return `${selectedKey} ${selectedValue}`; - }) - .join(" "); - const teuthologySuiteCommand = `teuthology suite ${commandArgs}`; - - setInputValue(teuthologySuiteCommand); + console.log("toggleRowLock"); + const newRowData = [...rowData]; + newRowData[index].lock = !newRowData[index].lock; + setRowData(newRowData); }; return ( @@ -127,20 +116,25 @@ export default function Schedule() { Schedule - Pulpito - + Schedule a run -
- + { + if (data.checked) { + return `${data.key} ${data.value}`; + } + }) + .join(" ")}`} + placeholder="teuthology-suite" + disabled={true} /> -
+
- - - - - - - - - - {selectedKeyIndices.map((selectedKeyIndex, index) => ( - setHoveredRowIndex(index)} - onMouseLeave={() => setHoveredRowIndex(null)} - style={{ - background: hoveredRowIndex === index ? "#f5f5f5" : "transparent", - }} - > - -
KeyValue
-
- handleCheckboxChange(index, event)} - /> -
toggleRowLock(index)} - > - {rowLocks[index] ? : } -
-
- 		- + + + + Key + Value + + + + { + {rowData.map((data, index) => ( + - {predefinedKeyOptions.map((option, optionIndex) => ( - - ))} - - - - - ))} - -
-
- handleValueChange(index, event)} - disabled={rowLocks[index]} - /> -
handleDeleteRow(index)} - > - {hoveredRowIndex === index && } -
-
-
- - + + handleCheckboxChange(index, event)} /> + + + + + + handleValueChange(index, event)} + disabled={data.lock} + /> + + +
+
toggleRowLock(index)} + > + {data.lock ? : } +
+
{ + handleDeleteRow(index); + }} + > + +
+
+ + + ))} + } +
+ +
+ + + + + ); }