Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Better UI layout #72

Merged
merged 1 commit into from
Oct 16, 2023
Merged

fix: Better UI layout #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions web/src-web/src/components/MainMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ type MenuItemProps = {
}
const MenuItem = (props: MenuItemProps) => {
return props.active
? <NavLink to={props.to} className="bg-white rounded-xl flex items-center justify-start p-3 text-primary-darker">
<i className={`pi ml-4 mr-5 text-primary ${props.icon}`}></i>
<div className="font-semibold">{props.name}</div>
? <NavLink to={props.to} className="bg-white rounded-xl flex items-center justify-center md:justify-start p-3 text-primary-darker">
<i className={`pi ml-4 mr-4 text-primary ${props.icon}`} title={props.name}></i>
<div className="font-semibold hidden md:block">{props.name}</div>
</NavLink>

: <NavLink to={props.to} className="text-white flex items-center justify-start p-3 mt-3">
<i className={`pi ml-4 mr-5 ${props.icon}`}></i>
<div>{props.name}</div>
: <NavLink to={props.to} className="text-white flex items-center justify-center md:justify-start p-3 mt-3">
<i className={`pi ml-4 mr-4 ${props.icon}`} title={props.name}></i>
<div className="hidden md:block">{props.name}</div>
</NavLink>
}

Expand All @@ -32,10 +32,10 @@ const MainMenu = () => {
setHostIp(await api.auth.getLoggedInHostIp());
});

return <div className="h-full min-w-[250px] p-3 rounded-2xl shadow shadow-blue-300 flex flex-col bg-primary z-10">
return <div className="h-full md:min-w-[250px] p-3 rounded-2xl shadow shadow-blue-300 flex flex-col bg-primary z-10">
<div className="mt-3 mb-8 flex justify-center items-center font-bold">
<img className="mr-2" src={logo} width={50} height={50}/>
<div className="text-white">Makoon</div>
<img className="md:mr-2" title="Makoon" src={logo} width={50} height={50}/>
<div className="text-white hidden md:block">Makoon</div>
</div>
<div className="grow min-h-0 overflow-x-hidden overflow-y-auto">
<MenuItem name="Clusters" to="/list" active icon="pi-th-large"/>
Expand All @@ -44,9 +44,11 @@ const MainMenu = () => {
{/*<MenuItem name="Settings" to="/list" icon="pi-cog"/>*/}

<div className="text-white flex items-center justify-start p-3 mt-3">
<a href={`https://${hostIp}:8006`} target="_blank" className="flex items-center">
<a href={`https://${hostIp}:8006`}
title="Proxmox console"
target="_blank" className="flex items-center">
<i className="pi pi-external-link ml-4 mr-5"></i>
<div className="underline">Proxmox</div>
<div className="underline hidden md:block">Proxmox</div>
</a>
</div>
</div>
Expand Down
6 changes: 5 additions & 1 deletion web/src-web/src/views/clusters-management/components/nodes/NodesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,11 @@ const NodesTable = (props: Props) => {
dataKey="vmId"
selection={props.nodes.find((i) => i.vmId.toString() == props.selectedNode)}
onSelectionChange={(e) => props.onSelectNode((e.value as ClusterNode).vmId)}
tableStyle={{minWidth: '50rem'}} selectionMode="single" scrollable scrollHeight="flex">
tableStyle={{minWidth: '50rem'}}
selectionMode="single"
scrollable
responsiveLayout="scroll"
scrollHeight="flex">

<Column field="name" header="Node name" className="font-semibold"
body={(r) => {
Expand Down
117 changes: 62 additions & 55 deletions web/src-web/src/views/clusters-management/components/nodes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,76 +31,83 @@ const Nodes = () => {
{addNodeDialog}
<Panel title="Details" icon="pi-server" className="mb-8">
<div className="flex justify-evenly">
<div className="flex flex-col justify-center">
<div className="mb-2">
<span className="italic mr-2">Username:</span><span
className="font-bold">{clusterManagementStore.cluster.nodeUsername}</span>
</div>
<div className="grow flex justify-evenly flex-col md:flex-row">
<div className="flex flex-col justify-center">
<div className="mb-2">
<span className="italic mr-2">Username:</span><span
className="font-bold">{clusterManagementStore.cluster.nodeUsername}</span>
</div>

<div className="mb-2">
<span className="italic mr-2">Password:</span><span
className="font-bold">
<div className="mb-2">
<span className="italic mr-2">Password:</span><span
className="font-bold">
<HiddenPassword password={clusterManagementStore.cluster.nodePassword}/>
</span>
</div>
<div className="mb-2">
<span className="italic mr-2">Disk size:</span><span
className="font-bold">{clusterManagementStore.cluster.diskSize} GiB</span>
</div>

<div className="mb-2">
<span className="italic mr-2">MicroK8S version:</span><span
className="font-bold">{clusterManagementStore.cluster.kubeVersion}</span>
</div>
</div>
<div className="mb-2">
<span className="italic mr-2">Disk size:</span><span
className="font-bold">{clusterManagementStore.cluster.diskSize} GiB</span>
</div>
</div>
<span className="border-r-2 border-bg rounded-full mx-8 w-[0px]"></span>
<div className="flex flex-col justify-center py-4">
<div className="mb-2">
<span className="italic mr-2">Network bridge:</span><span
className="font-bold">{clusterManagementStore.cluster.network?.bridge}</span>
</div>
<div className="mb-2">
<span className="italic mr-2">Subnet mask:</span><span
className="font-bold">{clusterManagementStore.cluster.network?.subnetMask}</span>
</div>
<div className="mb-2">
<span className="italic mr-2">Gateway:</span><span
className="font-bold">{clusterManagementStore.cluster.network?.gateway}</span>
</div>
<div>
<span className="italic mr-2">DNS server:</span><span
className="font-bold">{clusterManagementStore.cluster.network?.dns}</span>
<span className="border-r-2 border-bg rounded-full w-[0px] hidden md:block"></span>
<div className="flex flex-col justify-center py-4">
<div className="mb-2">
<span className="italic mr-2">Network bridge:</span><span
className="font-bold">{clusterManagementStore.cluster.network?.bridge}</span>
</div>
<div className="mb-2">
<span className="italic mr-2">Subnet mask:</span><span
className="font-bold">{clusterManagementStore.cluster.network?.subnetMask}</span>
</div>
<div className="mb-2">
<span className="italic mr-2">Gateway:</span><span
className="font-bold">{clusterManagementStore.cluster.network?.gateway}</span>
</div>
<div>
<span className="italic mr-2">DNS server:</span><span
className="font-bold">{clusterManagementStore.cluster.network?.dns}</span>
</div>
</div>
</div>

<span className="border-r-2 border-bg rounded-full mx-8 w-[0px]"></span>
<div className="m-4 flex flex-col items-center justify-center">
<div className="text-3xl flex items-center">
{clusterManagementStore.cpuSum}
<div className="relative" style={{top: "-10px", left: "5px"}}>
<div className="absolute text-sm">cores</div>
<span className="border-r-2 border-bg rounded-full w-[0px] hidden md:block"></span>
<div className="grow flex flex-col 2xl:flex-row items-center justify-center 2xl:justify-evenly">
<div className="m-4 flex flex-col items-center justify-center">
<div className="text-3xl flex items-center">
{clusterManagementStore.cpuSum}
<div className="relative" style={{top: "-10px", left: "5px"}}>
<div className="absolute text-sm">cores</div>
</div>
</div>
<div className="text-sm">CPU</div>
</div>
<div className="text-sm">CPU</div>
</div>

<span className="border-r-2 border-bg rounded-full mx-8 w-[0px]"></span>

<div className="m-4 flex flex-col items-center justify-center">
<div className="text-3xl flex items-center">
{clusterManagementStore.ramSum}
<div className="relative" style={{top: "-10px", left: "5px"}}>
<div className="absolute text-sm">MiB</div>
<div className="m-4 flex flex-col items-center justify-center">
<div className="text-3xl flex items-center">
{clusterManagementStore.ramSum}
<div className="relative" style={{top: "-10px", left: "5px"}}>
<div className="absolute text-sm">MiB</div>
</div>
</div>
<div className="text-sm">MEMORY</div>
</div>
<div className="text-sm">MEMORY</div>
</div>

<span className="border-r-2 border-bg rounded-full mx-8 w-[0px]"></span>

<div className="m-4 flex flex-col items-center justify-center">
<div className="text-3xl flex items-center">
{clusterManagementStore.disksSizeSum}
<div className="relative" style={{top: "-10px", left: "5px"}}>
<div className="absolute text-sm">GiB</div>
<div className="m-4 flex flex-col items-center justify-center">
<div className="text-3xl flex items-center">
{clusterManagementStore.disksSizeSum}
<div className="relative" style={{top: "-10px", left: "5px"}}>
<div className="absolute text-sm">GiB</div>
</div>
</div>
<div className="text-sm">STORAGE</div>
</div>
<div className="text-sm">STORAGE</div>
</div>
</div>
</Panel>
Expand All @@ -122,7 +129,7 @@ const Nodes = () => {
}}/>
</Panel.Title>}
icon="pi-server"
className="mb-4 grow min-h-0">
className="mb-4 grow min-h-[170px]">
<NodesTable clusterName={clusterManagementStore.cluster.clusterName}
nodes={clusterManagementStore.masterNodesWithStatus}
selectedNode={selectedNode}
Expand All @@ -144,7 +151,7 @@ const Nodes = () => {
}}/>
</Panel.Title>}
icon="pi-server"
className="grow min-h-0">
className="grow min-h-[170px]">
<NodesTable clusterName={clusterManagementStore.cluster.clusterName}
nodes={clusterManagementStore.workerNodesWithStatus}
selectedNode={selectedNode}
Expand Down
21 changes: 12 additions & 9 deletions web/src-web/src/views/clusters-management/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,26 +19,29 @@ const LOADING_INDICATOR_DELETE_CLUSTER = "DELETE_CLUSTER";
const SubMenu = (props: { icon: string, name: string, to: string }) => {
return <NavLink to={props.to} className={({isActive}) => {
return `mt-1 flex items-center py-2 pl-4 pr-2 rounded-xl ${isActive ? "bg-primary text-primary-text" : "text-text"}`
}}>
<i className={`pi ${props.icon}`}></i>
<span className="ml-3">{props.name}</span>
}} title={props.name}>
<i className={`pi mr-2 ${props.icon}`}></i>
<span className="ml-1 hidden md:block">{props.name}</span>
</NavLink>
}

const SubMenuLinkButton = (props: { icon: string, name: string, onClick: () => void, classNameText?: string, disabled?: boolean }) => {
return <div className={`flex items-center mt-4 pl-4 ${!props.disabled ? props.classNameText ?? "text-text" : "text-surface-300"}`}
onClick={() => {
!props.disabled && props.onClick();
}}>
<i className={`pi ${props.icon}`}></i>
<span className="ml-3 hover:underline hover:cursor-pointer">{props.name}</span>
}}
title={props.name}>
<i className={`pi mr-3 ${props.icon}`}></i>
<span className="hover:underline hover:cursor-pointer hidden md:block">{props.name}</span>
</div>
}

const SubMenuLink = (props: { icon: string, name: string, href: string, classNameText?: string }) => {
return <a href={props.href} className={`flex items-center mt-4 pl-4 ${props.classNameText ?? "text-text"}`}>
return <a href={props.href} className={`flex items-center whitespace-nowrap mt-4 pl-4 ${props.classNameText ?? "text-text"}`}
title={props.name}
>
<i className={`mr-3 pi ${props.icon}`}></i>
{props.name}
<span className="hidden md:block">{props.name}</span>
</a>
}
const ClusterManagement = () => {
Expand Down Expand Up @@ -70,7 +73,7 @@ const ClusterManagement = () => {
}
return <MainContainer>
<div className="-ml-12 h-full flex">
<div className="h-full bg-white rounded-r-2xl min-w-[300px] py-8 pl-8 pr-4 flex flex-col text-md">
<div className="h-full bg-white rounded-r-2xl py-8 pl-8 pr-4 flex flex-col text-md">
<SubMenu icon="pi-server" name="Nodes" to={"nodes"}/>
<SubMenu icon="pi-desktop" name="Helm apps" to={"apps"}/>
<SubMenu icon="pi-desktop" name="Workloads" to={"workloads"}/>
Expand Down