added comp_systems and modular instances frontend
This commit is contained in:
194
src/Pages/DevicesPage/DevicePage/DevicePage.tsx
Normal file
194
src/Pages/DevicesPage/DevicePage/DevicePage.tsx
Normal file
@@ -0,0 +1,194 @@
|
||||
import {
|
||||
Alert,
|
||||
Card,
|
||||
Center,
|
||||
LoadingOverlay,
|
||||
Pill,
|
||||
Space,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Helmet } from "react-helmet";
|
||||
import { IconPlus } from "@tabler/icons-react";
|
||||
import { useParams } from "react-router";
|
||||
import CustomButton from "Components/CustomButton/CustomButton";
|
||||
import { useAuthenticationStore } from "Stores/AuthenticationStore";
|
||||
import { useDeviceStore } from "Stores/DeviceStore";
|
||||
import { getComputationalSystemById } from "Api/QuantumBackend/MachineManagment";
|
||||
import type { SystemTeamData, SystemWithTeams } from "Types/Machine/Machine";
|
||||
import TeamInMachineListCard from "Components/ListCard/TeamListCard/TeamInMachineCard/TeamInMachine";
|
||||
import { AddTeamToDevice } from "Modals/AddTeamToDevice/AddTeamToDevice";
|
||||
import { getShortTeamsList } from "Api/QuantumBackend/TeamManagement";
|
||||
|
||||
function DevicePage() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const { device_id } = useParams();
|
||||
const { setDevices, devices } = useDeviceStore();
|
||||
const { profile } = useAuthenticationStore();
|
||||
const [is_loading, set_is_loading] = useState(true);
|
||||
|
||||
const [cur_device, set_cur_device] = useState<SystemWithTeams | undefined>(
|
||||
devices.find((e) => e.system.id === Number(device_id)),
|
||||
);
|
||||
|
||||
const [teams, setTeams] =
|
||||
useState<{ team_id: number; team_name: string }[]>();
|
||||
|
||||
useEffect(() => {
|
||||
if (!cur_device && profile) {
|
||||
getComputationalSystemById(Number(device_id))
|
||||
.then((device) => {
|
||||
if (device) {
|
||||
console.log(device);
|
||||
setDevices([device]);
|
||||
set_cur_device(device);
|
||||
set_is_loading(false);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
set_is_loading(false);
|
||||
});
|
||||
} else {
|
||||
if (profile) {
|
||||
set_is_loading(false);
|
||||
}
|
||||
}
|
||||
if (devices.find((e) => e.system.id === Number(device_id)) != cur_device) {
|
||||
set_cur_device(devices.find((e) => e.system.id === Number(device_id)));
|
||||
}
|
||||
if (profile && !teams) {
|
||||
getShortTeamsList({ permission: "manage_machines" })
|
||||
.then((teams) => {
|
||||
if (teams) {
|
||||
setTeams(teams);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setTeams([]);
|
||||
});
|
||||
}
|
||||
}, [cur_device, profile, devices]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>
|
||||
{cur_device
|
||||
? "Device " + cur_device.system.id + " | QMolSim"
|
||||
: "Error | QmolSim"}
|
||||
</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="See the information on the currently selected team"
|
||||
/>
|
||||
</Helmet>
|
||||
{cur_device && (
|
||||
<AddTeamToDevice
|
||||
isOpened={isOpen}
|
||||
setIsOpened={setIsOpen}
|
||||
device={cur_device}
|
||||
teams={teams}
|
||||
/>
|
||||
)}
|
||||
<div className="TeamPage">
|
||||
<LoadingOverlay
|
||||
visible={is_loading}
|
||||
zIndex={1000}
|
||||
overlayProps={{ radius: "sm", blur: 2 }}
|
||||
loaderProps={{ size: 50, type: "dots" }}
|
||||
/>
|
||||
|
||||
<Card className="TeamData">
|
||||
<div>
|
||||
<Title order={3}>
|
||||
Устройство: {cur_device ? cur_device.system.system_name : ""}
|
||||
</Title>
|
||||
<Space h="xl" />
|
||||
<div style={{ display: "flex", flexDirection: "row", gap: "15px" }}>
|
||||
<Text size="md">Статус: </Text>
|
||||
<Pill className="ExperimentPill">
|
||||
<Text size="md">{cur_device?.system.status}</Text>
|
||||
</Pill>
|
||||
<div className="dateContainer">
|
||||
<Text size={"lg"}>Статус обновлен: </Text>
|
||||
<Text size="md" style={{ alignContent: "center" }}>
|
||||
{new Date(
|
||||
cur_device?.system.last_updated
|
||||
? cur_device?.system.last_updated + "Z"
|
||||
: "",
|
||||
).toLocaleDateString("ru")}{" "}
|
||||
</Text>
|
||||
<Text size="md" style={{ alignContent: "center" }}>
|
||||
{new Date(
|
||||
cur_device?.system.last_updated
|
||||
? cur_device?.system.last_updated + "Z"
|
||||
: "",
|
||||
).toLocaleTimeString("ru")}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<Space h="md" />
|
||||
<Text size="lg">
|
||||
Максимальное количество кубит:{" "}
|
||||
<b>{cur_device?.system.max_qubits}</b>
|
||||
</Text>
|
||||
</div>
|
||||
</Card>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "nowrap",
|
||||
gap: "20px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Title order={3} style={{ textWrap: "nowrap" }}>
|
||||
Команды с доступом:
|
||||
</Title>
|
||||
<div>
|
||||
<CustomButton
|
||||
color="contrast"
|
||||
onClick={() => {
|
||||
setIsOpen(true);
|
||||
}}
|
||||
icon={<IconPlus />}
|
||||
text="Добавить команду"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{cur_device && cur_device.teams.length > 0 && (
|
||||
<div className="TeamMembers">
|
||||
{cur_device.teams.map((team: SystemTeamData) => {
|
||||
return <TeamInMachineListCard team={team} system={cur_device} />;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{cur_device && cur_device.teams.length == 0 && (
|
||||
<div className="TeamMembers">
|
||||
<Alert>
|
||||
<Center>
|
||||
{" "}
|
||||
<Text c="contrast" size={"xl"}>
|
||||
Команд с доступом нет
|
||||
</Text>{" "}
|
||||
</Center>
|
||||
</Alert>
|
||||
</div>
|
||||
)}
|
||||
{!cur_device && !is_loading && (
|
||||
<Alert color="red">
|
||||
<Center>
|
||||
{" "}
|
||||
<Text c="contrast" size={"xl"}>
|
||||
Ошибка. Команда не найдена
|
||||
</Text>{" "}
|
||||
</Center>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default DevicePage;
|
||||
@@ -0,0 +1,5 @@
|
||||
.DevicesPage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@@ -3,8 +3,78 @@ import "./DevicesPage.css";
|
||||
import { PaginationContainer } from "Components/PaginationContainer/PaginationContainer";
|
||||
import { Alert } from "@mantine/core";
|
||||
import { Link } from "react-router";
|
||||
import { useDeviceStore } from "Stores/DeviceStore";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useAuthenticationStore } from "Stores/AuthenticationStore";
|
||||
import { getMySystems } from "Api/QuantumBackend/MachineManagment";
|
||||
import MachinesListCard from "Components/ListCard/MachineListCard/MachinesListCard";
|
||||
|
||||
function DevicesPage() {
|
||||
const { devices, setDevices, setTotalDevices, totalDevices, removeDevice } =
|
||||
useDeviceStore();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const { profile } = useAuthenticationStore();
|
||||
const [cur_page, set_cur_page] = useState<number>(1);
|
||||
const [page_size, set_page_size] = useState<number>(256);
|
||||
|
||||
useEffect(() => {
|
||||
setIsLoading(true);
|
||||
if (profile) {
|
||||
getMySystems({ page_num: cur_page })
|
||||
.then((devices) => {
|
||||
setDevices(devices.systems);
|
||||
set_cur_page(devices.cur_page);
|
||||
setTotalDevices(devices.total_systems);
|
||||
set_page_size(devices.page_size);
|
||||
setIsLoading(false);
|
||||
})
|
||||
.catch(() => setIsLoading(false));
|
||||
}
|
||||
}, [profile]);
|
||||
|
||||
useEffect(() => {
|
||||
if (profile) {
|
||||
if (devices && devices.length > 0 && devices.length > page_size) {
|
||||
removeDevice(devices[devices.length - 1].system.id);
|
||||
}
|
||||
if (
|
||||
devices &&
|
||||
devices.length > 0 &&
|
||||
cur_page > Math.ceil(totalDevices / page_size)
|
||||
) {
|
||||
setIsLoading(true);
|
||||
getMySystems({ page_num: Math.max(1, cur_page - 1) })
|
||||
.then((devices) => {
|
||||
setDevices(devices.systems);
|
||||
set_cur_page(devices.cur_page);
|
||||
setTotalDevices(devices.total_systems);
|
||||
set_page_size(devices.page_size);
|
||||
setIsLoading(false);
|
||||
scroll({ top: 0 });
|
||||
})
|
||||
.catch(() => setIsLoading(false));
|
||||
set_cur_page(Math.max(1, cur_page - 1));
|
||||
}
|
||||
if (
|
||||
devices &&
|
||||
devices.length > 0 &&
|
||||
devices.length < Math.min(page_size, totalDevices) &&
|
||||
cur_page != Math.ceil(totalDevices / page_size)
|
||||
) {
|
||||
getMySystems({ page_num: cur_page })
|
||||
.then((devices) => {
|
||||
setDevices(devices.systems);
|
||||
set_cur_page(devices.cur_page);
|
||||
setTotalDevices(devices.total_systems);
|
||||
set_page_size(devices.page_size);
|
||||
setIsLoading(false);
|
||||
scroll({ top: 0 });
|
||||
})
|
||||
.catch(() => setIsLoading(false));
|
||||
}
|
||||
}
|
||||
}, [profile, devices]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
@@ -16,17 +86,33 @@ function DevicesPage() {
|
||||
</Helmet>
|
||||
<div className="DevicesPage">
|
||||
<PaginationContainer
|
||||
numberOfPages={1}
|
||||
isLoading={false}
|
||||
activePage={1}
|
||||
setPage={() => {}}
|
||||
numberOfPages={Math.ceil(totalDevices / page_size)}
|
||||
isLoading={isLoading}
|
||||
activePage={cur_page}
|
||||
setPage={(page) => {
|
||||
getMySystems({ page_num: page })
|
||||
.then((devices) => {
|
||||
setDevices(devices.systems);
|
||||
set_cur_page(devices.cur_page);
|
||||
setTotalDevices(devices.total_systems);
|
||||
set_page_size(devices.page_size);
|
||||
setIsLoading(false);
|
||||
scroll({ top: 0 });
|
||||
})
|
||||
.catch(() => setIsLoading(false));
|
||||
}}
|
||||
>
|
||||
<Alert title="Подключенные устройства не найдены" color="blue">
|
||||
Для того, чтобы добавить устройство, простмотрите{" "}
|
||||
<Link to={"documentaion"} className="invisible_link">
|
||||
документацию
|
||||
</Link>
|
||||
</Alert>
|
||||
{devices.length == 0 && !isLoading && (
|
||||
<Alert title="Подключенные устройства не найдены" color="blue">
|
||||
Для того, чтобы добавить устройство, простмотрите{" "}
|
||||
<Link to={"documentaion"} className="invisible_link">
|
||||
документацию
|
||||
</Link>
|
||||
</Alert>
|
||||
)}
|
||||
{devices.map((machine) => {
|
||||
return <MachinesListCard {...machine} />;
|
||||
})}
|
||||
</PaginationContainer>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user