Jannex
/
admin-dashboard-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

consoles

main
alex 2023-09-11 18:59:56 +02:00
parent ffb0b44d1a
commit 92005ef616
4 changed files with 200 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/App.js
View File

@ -13,6 +13,7 @@ import { AdminAreaRolesProvider } from "./Contexts/AdminAreaRolesContext";
import { UserProfileProvider } from "./Contexts/UserProfileContext";
import { UsersProvider } from "./Contexts/UsersContext";
import HeaderProvider from "./Contexts/HeaderContext";
import ConsolesProvider from "./Contexts/ConsolesContext";
export default function App() {
const [notificationApi, notificationContextHolder] =
@ -42,20 +43,22 @@ export default function App() {
<AdminAreaRolesProvider>
<UserProfileProvider>
<UsersProvider>
<WebSocketProvider
userSession={userSession}
setUserSession={setUserSession}
isWebSocketReady={isWebSocketReady}
setIsWebSocketReady={setIsWebSocketReady}
notificationApi={notificationApi}
>
<ReconnectingView isWebSocketReady={isWebSocketReady} />
<DashboardLayout
<ConsolesProvider>
<WebSocketProvider
userSession={userSession}
setUserSession={setUserSession}
/>
</WebSocketProvider>
isWebSocketReady={isWebSocketReady}
setIsWebSocketReady={setIsWebSocketReady}
notificationApi={notificationApi}
>
<ReconnectingView isWebSocketReady={isWebSocketReady} />
<DashboardLayout
userSession={userSession}
setUserSession={setUserSession}
/>
</WebSocketProvider>
</ConsolesProvider>
</UsersProvider>
</UserProfileProvider>
</AdminAreaRolesProvider>

66
src/Components/LogCard/index.js
View File

@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
import { Constants, myFetch } from "../../utils";
import { useTranslation } from "react-i18next";
export default function LogCard({ type }) {
export default function LogCard({ type, title, customResult }) {
const { t } = useTranslation();
const [checkboxInfoChecked, setCheckboxInfoChecked] = useState(true);
const [checkboxErrorChecked, setCheckboxErrorChecked] = useState(true);
@ -15,31 +15,43 @@ export default function LogCard({ type }) {
const [logs, setLogs] = useState([]);
useEffect(() => {
console.log("useEffect logCard");
console.log("useEffect logCard", type);
if (type === "") return;
// init request to get all available dates
myFetch(`${type}`, "GET", null, {}, 0, Constants.LOG_API_ADDRESS)
.then((data) => {
let dates = [];
console.log("data", data);
if (data.length === 0) return;
data.forEach((date) =>
dates.push({
dates = data.map((date) => {
return {
value: date,
label: date,
})
);
};
});
setAvailableDates(dates);
setSelectedDate(dates[0].value);
if (selectedDate === dates[0].value) {
loadLogs(dates[0].value);
}
})
.catch((errStatus) => console.log("error", errStatus));
}, []);
}, [type]);
const loadLogs = (date) => {
setLoadingSpinner(true);
console.log("loadLogs", date);
if (date === "") return;
// fetch logs
myFetch(`${type}?d=${date}`, "GET", null, {}, 0, Constants.LOG_API_ADDRESS)
.then((data) => {
@ -56,10 +68,13 @@ export default function LogCard({ type }) {
.catch((errStatus) => console.log("error", errStatus));
};
useEffect(() => loadLogs(selectedDate), [selectedDate]);
useEffect(() => {
loadLogs(selectedDate);
}, [selectedDate]);
return (
<Card
title={title}
extra={
<Space>
<Checkbox
@ -94,14 +109,31 @@ export default function LogCard({ type }) {
width: "100%",
}}
>
{!loadingSpinner ? (
<div style={{ height: "80vh", overflowY: "scroll", paddingRight: 6 }}>
{logs.map((log, i) => (
<p key={i} style={{ margin: 0 }}>
{log}
</p>
))}
</div>
{customResult === undefined ? (
<>
{!loadingSpinner && type !== "" ? (
<div
style={{ height: "80vh", overflowY: "scroll", paddingRight: 6 }}
>
{logs.map((log, i) => (
<p key={i} style={{ margin: 0 }}>
{log}
</p>
))}
</div>
) : (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "80vh",
}}
>
<Spin size="large"></Spin>
</div>
)}
</>
) : (
<div
style={{
@ -111,7 +143,7 @@ export default function LogCard({ type }) {
height: "80vh",
}}
>
<Spin size="large"></Spin>
{customResult}
</div>
)}
</Card>

34
src/Contexts/ConsolesContext.js Normal file
View File

@ -0,0 +1,34 @@
import { createContext, useContext, useState } from "react";
const preview = {
logManagerServers: [],
};
const ConsolesContext = createContext(preview);
export const useConsolesContext = () => useContext(ConsolesContext);
export default function ConsolesProvider({ children }) {
const [logManagerServers, setLogManagerServers] = useState([
{ label: "Dev Server", value: "http://127.0.0.1:50110/v1/log" },
{
label: "Stable Server",
value: "http://127.0.0.1:50120/v1/log",
},
{
label: "Test123",
value: "test",
},
]);
return (
<ConsolesContext.Provider
value={{
logManagerServers,
setLogManagerServers,
}}
>
{children}
</ConsolesContext.Provider>
);
}

103
src/Pages/Consoles/index.js
View File

@ -1,3 +1,104 @@
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() {
return <></>;
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>
}
/>
);
}