106 lines
2.8 KiB
JavaScript
106 lines
2.8 KiB
JavaScript
import axios from "axios";
|
|
import React, { useEffect, useState } from "react";
|
|
import { Link, Navigate, useParams } from "react-router-dom";
|
|
import { findValue, getListLog } from "../../api/apiLog";
|
|
import "./ListLog.css";
|
|
const ListLog = () => {
|
|
const [listFile, setListFile] = useState([]);
|
|
const [status, setStatus] = useState(200);
|
|
const [nameSearch, setNameSearch] = useState("");
|
|
const [valueSearch, setValueSearch] = useState("");
|
|
const [value, setValue] = useState("");
|
|
const getListFile = async () => {
|
|
try {
|
|
const res = await axios.get(getListLog);
|
|
setListFile(res.data);
|
|
setStatus(res.status);
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
const findValueInLog = async () =>{
|
|
try {
|
|
const res = await axios.post(findValue,{value: valueSearch});
|
|
|
|
setValue(res.data)
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
useEffect(() => {
|
|
getListFile();
|
|
}, []);
|
|
|
|
if (status === 200) {
|
|
return (
|
|
<div className="mainList">
|
|
<div className="inputSearch">
|
|
<Link to={"/"}>
|
|
<button
|
|
style={{
|
|
color: "white",
|
|
backgroundColor: "blue",
|
|
cursor: "pointer",
|
|
float: "left",
|
|
}}
|
|
>
|
|
Home
|
|
</button>
|
|
</Link>
|
|
<div>
|
|
<label>Search file name: </label>
|
|
<input
|
|
value={nameSearch}
|
|
placeholder={"Enter a file name"}
|
|
onChange={(e) => {
|
|
setNameSearch(e.target.value);
|
|
}}
|
|
></input>
|
|
</div>
|
|
|
|
<div>
|
|
<label>Search value: </label>
|
|
<input
|
|
value={valueSearch}
|
|
placeholder={"Enter value"}
|
|
onChange={(e) => {
|
|
setValueSearch(e.target.value);
|
|
}}
|
|
></input>
|
|
<button style={{backgroundColor:"#6cff00", cursor:"pointer"}} onClick={()=>findValueInLog()}>Run</button>
|
|
</div>
|
|
<textarea
|
|
style={{ height: "90vh", width: "50%", backgroundColor: "black", float:"right", color:"#6cff00", padding:10, display:value!==""?"block":"none" }}
|
|
value={value}
|
|
>
|
|
|
|
</textarea>
|
|
</div>
|
|
{listFile
|
|
?.filter(
|
|
(f) =>
|
|
f.toLocaleLowerCase().search(nameSearch.toLocaleLowerCase()) !==
|
|
-1
|
|
)
|
|
.map((file) => (
|
|
<div>
|
|
<Link to={"/logs/" + file}>{file}</Link>
|
|
<br></br>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div>
|
|
<h1>
|
|
<i>No files</i>
|
|
</h1>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default ListLog;
|