admin-dashboard-web/src/Pages/Consoles/index.js

105 lines
2.8 KiB
JavaScript

import { Result, Select, Space } from "antd";
import LogCard from "../../Components/LogCard";
import { useEffect, useState } from "react";
import { myFetch } from "../../utils";
import { useConsolesContext } from "../../Contexts/ConsolesContext";
export default function Consoles() {
const consolesContext = useConsolesContext();
const [selectedLogServer, setSelectedLogServer] = useState(
consolesContext.logManagerServers.length > 0
? consolesContext.logManagerServers[0].value
: ""
);
const [availableLogTypes, setAvailableLogTypes] = useState([]);
const [selectedLogType, setSelectedLogType] = useState("");
const [result, setResult] = useState();
useEffect(() => {
console.log("selectedLogServer", selectedLogServer);
if (selectedLogServer === "") return;
myFetch("/types", "GET", null, {}, 0, selectedLogServer)
.then((data) => {
console.log("data", data);
let newTypes = [];
if (data.length > 0) {
newTypes = data.map((type) => {
return { label: type, value: type };
});
setResult();
} else {
setResult(
<Result
status="404"
title="No log types found"
subTitle="Contact admin"
/>
);
}
setAvailableLogTypes(newTypes);
setSelectedLogType(newTypes.length > 0 ? newTypes[0].value : "");
})
.catch((err) => {
console.log("err", err);
setResult(
<Result
status="500"
title="Couldn't reach log manager server"
subTitle="Contact admin"
/>
);
});
}, [selectedLogServer]);
return (
<LogCard
type={selectedLogType}
customResult={
consolesContext.logManagerServers.length > 0 ? (
result
) : (
<Result
status="500"
title="No log manager specified"
subTitle="Contact admin"
/>
)
}
title={
<Space>
<Select
disabled={consolesContext.logManagerServers.length === 0}
style={{ width: 200 }}
options={consolesContext.logManagerServers}
value={selectedLogServer}
onChange={(value) => setSelectedLogServer(value)}
placeholder="Select server"
/>
{console.warn("def", consolesContext.logManagerServers[0])}
<Select
disabled={
result !== undefined ||
consolesContext.logManagerServers.length === 0
}
style={{ width: 200 }}
options={availableLogTypes}
value={selectedLogType}
onChange={(value) => setSelectedLogType(value)}
/>
</Space>
}
/>
);
}