Use tabs to organize UI

This commit is contained in:
Pierre HUBERT 2024-05-04 10:18:37 +02:00
parent a4a3b36c4e
commit e174bd4ae1
5 changed files with 100 additions and 18 deletions

View File

@ -1,15 +1,34 @@
import { makeStyles, typographyStyles } from "@fluentui/react-components"; import {
Tab,
TabList,
makeStyles,
typographyStyles,
} from "@fluentui/react-components";
import { ServerApi } from "./api/ServerApi"; import { ServerApi } from "./api/ServerApi";
import { AuthRouteWidget } from "./routes/AuthRouteWidget"; import { AuthRouteWidget } from "./routes/AuthRouteWidget";
import { AsyncWidget } from "./widgets/AsyncWidget"; import { AsyncWidget } from "./widgets/AsyncWidget";
import { MainMenu } from "./widgets/MainMenu"; import { MainMenu } from "./widgets/MainMenu";
import { SystemInfoWidget } from "./widgets/SystemInfoWidget"; import { SystemInfoWidget } from "./widgets/SystemInfoWidget";
import { VirtualMachinesWidget } from "./widgets/VirtualMachinesWidget"; import { VirtualMachinesWidget } from "./widgets/VirtualMachinesWidget";
import {
DesktopFilled,
DesktopRegular,
Info12Filled,
Info12Regular,
InfoFilled,
InfoRegular,
bundleIcon,
} from "@fluentui/react-icons";
import React from "react";
const useStyles = makeStyles({ const useStyles = makeStyles({
title: typographyStyles.title2, title: typographyStyles.title2,
}); });
const InfoIcon = bundleIcon(InfoFilled, InfoRegular);
const DesktopIcon = bundleIcon(DesktopFilled, DesktopRegular);
export function App() { export function App() {
return ( return (
<AsyncWidget <AsyncWidget
@ -24,6 +43,7 @@ export function App() {
function AppInner(): React.ReactElement { function AppInner(): React.ReactElement {
const styles = useStyles(); const styles = useStyles();
const [tab, setTab] = React.useState<"vm" | "info">("vm");
if (!ServerApi.Config.authenticated && !ServerApi.Config.disable_auth) if (!ServerApi.Config.authenticated && !ServerApi.Config.disable_auth)
return <AuthRouteWidget />; return <AuthRouteWidget />;
@ -36,12 +56,31 @@ function AppInner(): React.ReactElement {
margin: "50px auto", margin: "50px auto",
}} }}
> >
<div style={{ display: "flex", justifyContent: "space-between" }}>
<span className={styles.title}>VirtWebRemote</span> <span className={styles.title}>VirtWebRemote</span>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginTop: "30px",
}}
>
<TabList
selectedValue={tab}
onTabSelect={(_, d) => setTab(d.value as any)}
>
<Tab value="vm" icon={<DesktopIcon />}>
Virtual machines
</Tab>
<Tab value="info" icon={<InfoIcon />}>
System info
</Tab>
</TabList>
<div>
<MainMenu /> <MainMenu />
</div> </div>
<VirtualMachinesWidget /> </div>
<SystemInfoWidget /> {tab === "vm" && <VirtualMachinesWidget />}
{tab === "info" && <SystemInfoWidget />}
</div> </div>
); );
} }

View File

@ -0,0 +1,27 @@
import { APIClient } from "./ApiClient";
export interface VMInfo {
uiid: string;
name: string;
description?: string;
architecture: string;
memory: number;
number_vcpu: number;
can_get_state: boolean;
can_start: boolean;
can_shutdown: boolean;
can_kill: boolean;
can_reset: boolean;
can_suspend: boolean;
can_resume: boolean;
can_screenshot: boolean;
}
export class VMApi {
/**
* Get the list of VM that can be managed by this console
*/
static async GetList(): Promise<VMInfo[]> {
return (await APIClient.exec({ method: "GET", uri: "/vm/list" })).data;
}
}

View File

@ -1,17 +1,10 @@
import { makeStyles, typographyStyles } from "@fluentui/react-components";
import React from "react"; import React from "react";
const useStyles = makeStyles({
title: typographyStyles.title3,
});
export function SectionContainer( export function SectionContainer(
p: React.PropsWithChildren<{ title: string }> p: React.PropsWithChildren
): React.ReactElement { ): React.ReactElement {
const styles = useStyles();
return ( return (
<div style={{ margin: "100px 0px" }}> <div style={{ margin: "50px 15px" }}>
<span className={styles.title}>{p.title}</span>
<div style={{ height: "20px" }}></div> <div style={{ height: "20px" }}></div>
{p.children} {p.children}
</div> </div>

View File

@ -15,7 +15,7 @@ export function SystemInfoWidget(): React.ReactElement {
}; };
return ( return (
<SectionContainer title="System info"> <SectionContainer>
<AsyncWidget <AsyncWidget
loadKey={1} loadKey={1}
load={load} load={load}
@ -84,7 +84,7 @@ function SystemInfoWidgetInner(): React.ReactElement {
status!.system.available_memory + status!.system.used_memory status!.system.available_memory + status!.system.used_memory
)}`} )}`}
validationState="none" validationState="none"
style={{ flex: 1 }} style={{ flex: 2 }}
> >
<ProgressBar <ProgressBar
value={ value={
@ -93,6 +93,7 @@ function SystemInfoWidgetInner(): React.ReactElement {
} }
/> />
</Field> </Field>
<div style={{ width: "20px" }}></div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<p> <p>
Load average: {status!.system.load_average.one}{" "} Load average: {status!.system.load_average.one}{" "}

View File

@ -1,5 +1,27 @@
import React from "react";
import { VMApi, VMInfo } from "../api/VMApi";
import { SectionContainer } from "./SectionContainer"; import { SectionContainer } from "./SectionContainer";
import { AsyncWidget } from "./AsyncWidget";
export function VirtualMachinesWidget(): React.ReactElement { export function VirtualMachinesWidget(): React.ReactElement {
return <SectionContainer title="Virtual machines">TODO</SectionContainer>; const [list, setList] = React.useState<VMInfo[] | undefined>();
const load = async () => {
setList(await VMApi.GetList());
};
return (
<SectionContainer>
<AsyncWidget
loadKey={1}
load={load}
loadingMessage="Loading the list virtual machines..."
errMsg="Failed to load the list of virtual machines!"
build={() => <VirtualMachinesWidgetInner list={list!} />}
/>
</SectionContainer>
);
}
function VirtualMachinesWidgetInner(p: { list: VMInfo[] }): React.ReactElement {
return <>build list of vms</>;
} }