diff --git a/frontend/src/components/build/Build.tsx b/frontend/src/components/build/Build.tsx index 3e8ae6279..82b7b0ea0 100644 --- a/frontend/src/components/build/Build.tsx +++ b/frontend/src/components/build/Build.tsx @@ -1,6 +1,5 @@ import { useNavigate, useParams } from "@solidjs/router"; import { Component, createEffect, onCleanup, Show } from "solid-js"; -import { MAX_PAGE_WIDTH } from "../.."; import { useAppDimensions } from "../../state/DimensionProvider"; import { useAppState } from "../../state/StateProvider"; import { useUser } from "../../state/UserProvider"; @@ -14,16 +13,16 @@ import Header from "./Header"; import BuildTabs from "./tabs/Tabs"; import Updates from "./Updates"; -const Build2: Component<{}> = (p) => { +const Build: Component<{}> = (p) => { const { builds, ws } = useAppState(); const navigate = useNavigate(); const params = useParams(); const build = () => builds.get(params.id)!; const { isSemiMobile } = useAppDimensions(); - const { user } = useUser(); - const userCanUpdate = () => - user().admin || - build().permissions![getId(user())] === PermissionLevel.Update; + // const { user } = useUser(); + // const userCanUpdate = () => + // user().admin || + // build().permissions![getId(user())] === PermissionLevel.Update; let unsub = () => {}; createEffect(() => { unsub(); @@ -39,58 +38,22 @@ const Build2: Component<{}> = (p) => { - +
- - - - - - - ); -}; - -const Build: Component<{}> = (p) => { - const { builds, ws } = useAppState(); - const navigate = useNavigate(); - const params = useParams(); - const build = () => builds.get(params.id)!; - const { isSemiMobile } = useAppDimensions(); - const { user } = useUser(); - const userCanUpdate = () => - user().admin || - build().permissions![getId(user())] === PermissionLevel.Update; - let unsub = () => {}; - createEffect(() => { - unsub(); - unsub = ws.subscribe([Operation.DeleteBuild], (update) => { - if (update.target.id === params.id) { - navigate("/"); - } - }); - }); - onCleanup(() => unsub); - return ( - }> - - - {/* left / actions */} - -
- - + - {/* right / tabs */} @@ -98,4 +61,4 @@ const Build: Component<{}> = (p) => { ); }; -export default Build2; +export default Build; diff --git a/frontend/src/components/build/Header.tsx b/frontend/src/components/build/Header.tsx index 849d60fa8..3c5fca149 100644 --- a/frontend/src/components/build/Header.tsx +++ b/frontend/src/components/build/Header.tsx @@ -18,7 +18,7 @@ const Header: Component<{}> = (p) => { const params = useParams(); const build = () => builds.get(params.id)!; const { user } = useUser(); - const { isMobile } = useAppDimensions(); + const { isSemiMobile } = useAppDimensions(); const [showUpdates, toggleShowUpdates] = useLocalStorageToggle("show-updates"); const userCanUpdate = () => @@ -32,10 +32,10 @@ const Header: Component<{}> = (p) => { alignItems="center" style={{ position: "relative", - cursor: isMobile() && userCanUpdate() ? "pointer" : undefined, + cursor: isSemiMobile() ? "pointer" : undefined, }} onClick={() => { - if (isMobile() && userCanUpdate()) toggleShowUpdates(); + if (isSemiMobile()) toggleShowUpdates(); }} > @@ -54,7 +54,7 @@ const Header: Component<{}> = (p) => { - + updates{" "} = (p) => { - + diff --git a/frontend/src/components/deployment/Deployment.tsx b/frontend/src/components/deployment/Deployment.tsx index 6de232d71..8869aec5a 100644 --- a/frontend/src/components/deployment/Deployment.tsx +++ b/frontend/src/components/deployment/Deployment.tsx @@ -17,6 +17,7 @@ import Updates from "./Updates"; const Deployment2: Component<{}> = (p) => { const { servers, deployments } = useAppState(); + const { isSemiMobile, isMobile } = useAppDimensions(); const params = useParams(); const deployment = () => deployments.get(params.id); const server = () => @@ -29,17 +30,21 @@ const Deployment2: Component<{}> = (p) => { - +
- + + + diff --git a/frontend/src/components/deployment/Header.tsx b/frontend/src/components/deployment/Header.tsx index 123f68b76..97dba7cd2 100644 --- a/frontend/src/components/deployment/Header.tsx +++ b/frontend/src/components/deployment/Header.tsx @@ -24,7 +24,7 @@ const Header: Component<{}> = (p) => { deployment()!.state === DockerContainerState.NotDeployed ? undefined : deployment().container?.status?.toLowerCase(); - const { isMobile } = useAppDimensions(); + const { isSemiMobile } = useAppDimensions(); const [showUpdates, toggleShowUpdates] = useLocalStorageToggle("show-updates"); const userCanUpdate = () => @@ -38,11 +38,11 @@ const Header: Component<{}> = (p) => { class={combineClasses("card shadow")} style={{ position: "relative", - cursor: isMobile() && userCanUpdate() ? "pointer" : undefined, - height: "fit-content" + cursor: isSemiMobile() && userCanUpdate() ? "pointer" : undefined, + height: "fit-content", }} onClick={() => { - if (isMobile() && userCanUpdate()) toggleShowUpdates(); + if (isSemiMobile() && userCanUpdate()) toggleShowUpdates(); }} > @@ -52,7 +52,7 @@ const Header: Component<{}> = (p) => { target={ { - client.delete_deployment(params.id) + client.delete_deployment(params.id); }} class="red" > @@ -73,7 +73,7 @@ const Header: Component<{}> = (p) => {
{status()}
 - + updates{" "} = (p) => { - + diff --git a/frontend/src/components/home/Home.tsx b/frontend/src/components/home/Home.tsx index 52b963320..7f4e2f8eb 100644 --- a/frontend/src/components/home/Home.tsx +++ b/frontend/src/components/home/Home.tsx @@ -19,24 +19,20 @@ const Home2: Component<{}> = (p) => { // const { width } = useAppDimensions(); const { servers } = useAppState(); return ( - - {/* */} - , - }, - { - title: "servers", - element: () => , - }, - ]} - /> - {/* */} - + , + }, + { + title: "servers", + element: () => , + }, + ]} + /> ); }; diff --git a/frontend/src/components/home/Tree/Groups.tsx b/frontend/src/components/home/Tree/Groups.tsx index 864c9917c..62f2d3636 100644 --- a/frontend/src/components/home/Tree/Groups.tsx +++ b/frontend/src/components/home/Tree/Groups.tsx @@ -69,6 +69,7 @@ const Group: Component<{ id: string }> = (p) => {

{group()?.name}

+

{serverIDs()!.length} server{serverIDs()!.length > 1 ? "s" : ""}

- } - > - - - e.stopPropagation()}> - - - - - + = (p) => { s.Deployments, open() ? s.Enter : s.Exit )} + gridTemplateColumns={isSemiMobile() ? "1fr" : "1fr 1fr"} > {(id) => } @@ -171,6 +118,7 @@ const Server: Component<{ id: string }> = (p) => { s.Deployments, open() ? s.Enter : s.Exit )} + gridTemplateColumns={isSemiMobile() ? "1fr" : "1fr 1fr"} > {(id) => } = (p) => { }; export default Server; + +const ServerStats: Component<{ id: string }> = (p) => { + const { servers, serverStats } = useAppState(); + const { isMobile, isSemiMobile } = useAppDimensions(); + const server = () => servers.get(p.id); + const [reloading, setReloading] = createSignal(false); + const stats = () => serverStats.get(p.id); + const reloadStats = async () => { + setReloading(true); + await serverStats.load(p.id); + setReloading(false); + }; + return ( + + }> + + +
cpu:
+

{stats()!.cpu_perc.toFixed(1)}%

+ + +
mem:
+

+ {((100 * stats()!.mem_used_gb) / stats()!.mem_total_gb).toFixed( + 1 + )} + % +

+ +
{stats()!.mem_total_gb.toFixed()} GiB
+ + + +
disk:
+

+ {((100 * stats()!.disk.used_gb) / stats()!.disk.total_gb).toFixed( + 1 + )} + % +

+ +
{readableStorageAmount(stats()!.disk.total_gb)}
+ + + + + + + + } + > + + + e.stopPropagation()} + > + + + + + + ); +} diff --git a/frontend/src/components/home/home.module.scss b/frontend/src/components/home/home.module.scss index 4f01c66ba..98e22fc9c 100644 --- a/frontend/src/components/home/home.module.scss +++ b/frontend/src/components/home/home.module.scss @@ -1,16 +1,5 @@ @use "../../style/colors.scss" as c; -.Home { - width: 100%; - grid-template-columns: repeat(2, 1fr); -} - -@media only screen and (max-width: 1200px) { - .Home { - grid-template-columns: 1fr; - } -} - .SummaryItem { background-color: c.$lightgrey; padding: 1rem; diff --git a/frontend/src/components/server/Header.tsx b/frontend/src/components/server/Header.tsx index 417f9e72b..6841b4b10 100644 --- a/frontend/src/components/server/Header.tsx +++ b/frontend/src/components/server/Header.tsx @@ -1,4 +1,4 @@ -import { Component, Show } from "solid-js"; +import { Component, createResource, Show } from "solid-js"; import { useAppState } from "../../state/StateProvider"; import { useUser } from "../../state/UserProvider"; import { combineClasses, getId, serverStatusClass } from "../../util/helpers"; @@ -12,6 +12,7 @@ import Updates from "./Updates"; import { PermissionLevel, Server } from "../../types"; import { A, useParams } from "@solidjs/router"; import { client } from "../.."; +import Loading from "../shared/loading/Loading"; const Header: Component<{}> = (p) => { const { servers } = useAppState(); @@ -19,12 +20,15 @@ const Header: Component<{}> = (p) => { const server = () => servers.get(params.id)!; const status = () => server().status.replaceAll("_", " ").toUpperCase(); const { user } = useUser(); - const { isMobile } = useAppDimensions(); + const { isMobile, isSemiMobile } = useAppDimensions(); const [showUpdates, toggleShowUpdates] = useLocalStorageToggle("show-updates"); const userCanUpdate = () => user().admin || server().server.permissions![getId(user())] === PermissionLevel.Update; + const [version] = createResource(async () => { + return await client.get_server_version(params.id).catch(); + }); return ( <> = (p) => { alignItems="center" style={{ position: "relative", - cursor: isMobile() && userCanUpdate() ? "pointer" : undefined, + cursor: isSemiMobile() ? "pointer" : undefined, }} onClick={() => { - if (isMobile() && userCanUpdate()) toggleShowUpdates(); + if (isSemiMobile()) toggleShowUpdates(); }} > @@ -50,6 +54,11 @@ const Header: Component<{}> = (p) => { + + }> +
periphery v{version()}
+ +
{status()}
= (p) => { - + updates{" "} = (p) => { - + diff --git a/frontend/src/components/server/Server.tsx b/frontend/src/components/server/Server.tsx index 49891b661..3bd984fea 100644 --- a/frontend/src/components/server/Server.tsx +++ b/frontend/src/components/server/Server.tsx @@ -1,13 +1,8 @@ import { useParams } from "@solidjs/router"; import { Component, Show } from "solid-js"; -import { MAX_PAGE_WIDTH } from "../.."; import { useAppDimensions } from "../../state/DimensionProvider"; import { useAppState } from "../../state/StateProvider"; -import { useUser } from "../../state/UserProvider"; -import { PermissionLevel } from "../../types"; -import { combineClasses, getId } from "../../util/helpers"; import NotFound from "../NotFound"; -import Flex from "../shared/layout/Flex"; import Grid from "../shared/layout/Grid"; import Actions from "./Actions"; import { ActionStateProvider } from "./ActionStateProvider"; @@ -15,11 +10,11 @@ import Header from "./Header"; import ServerTabs from "./tabs/Tabs"; import Updates from "./Updates"; -const Server2: Component<{}> = (p) => { +const Server: Component<{}> = (p) => { const { servers } = useAppState(); const params = useParams(); const server = () => servers.get(params.id)!; - const { user } = useUser(); + const { isSemiMobile } = useAppDimensions(); // const userCanUpdate = () => // user().admin || // server()!.server.permissions![getId(user())] === PermissionLevel.Update; @@ -28,47 +23,22 @@ const Server2: Component<{}> = (p) => { - +
- - - - - - - ); -}; - -const Server: Component<{}> = (p) => { - const { servers } = useAppState(); - const params = useParams(); - const server = () => servers.get(params.id)!; - const { isSemiMobile } = useAppDimensions(); - const { user } = useUser(); - const userCanUpdate = () => - user().admin || - server()!.server.permissions![getId(user())] === PermissionLevel.Update; - return ( - }> - - - {/* left / actions */} - -
- - + - {/* right / tabs */} @@ -76,4 +46,4 @@ const Server: Component<{}> = (p) => { ); }; -export default Server2; +export default Server; diff --git a/frontend/src/components/stats/CurrentStats.tsx b/frontend/src/components/stats/CurrentStats.tsx index 8a924f08d..56352d7f3 100644 --- a/frontend/src/components/stats/CurrentStats.tsx +++ b/frontend/src/components/stats/CurrentStats.tsx @@ -78,7 +78,6 @@ const CurrentStats2: Component<{}> = (p) => { style={{ width: "100%", "box-sizing": "border-box", - "max-width": `${MAX_PAGE_WIDTH}px`, }} gridTemplateColumns="auto 1fr auto" > diff --git a/frontend/src/components/stats/Stats.tsx b/frontend/src/components/stats/Stats.tsx index 90b02f09b..e18c6f894 100644 --- a/frontend/src/components/stats/Stats.tsx +++ b/frontend/src/components/stats/Stats.tsx @@ -39,8 +39,7 @@ const StatsComp: Component<{}> = () => { return ( diff --git a/frontend/src/components/topbar/Search/Search.tsx b/frontend/src/components/topbar/Search/Search.tsx index df5618b55..9dd6f5c11 100644 --- a/frontend/src/components/topbar/Search/Search.tsx +++ b/frontend/src/components/topbar/Search/Search.tsx @@ -27,7 +27,7 @@ const mobileStyle: JSX.CSSProperties = { }; export const Search: Component<{}> = (p) => { - const { isMobile } = useAppDimensions(); + const { isSemiMobile } = useAppDimensions(); const { search, open, input } = useSearchState(); let inputRef: HTMLInputElement | undefined; useWindowKeyDown((e) => { @@ -44,12 +44,12 @@ export const Search: Component<{}> = (p) => { menuClass={s.SearchMenu} menuStyle={{ gap: "0.5rem", - ...(isMobile() ? mobileStyle : {}), + ...(isSemiMobile() ? mobileStyle : {}), }} - backgroundColor={isMobile() ? "rgba(0,0,0,0.6)" : "rgba(0,0,0,0.4)"} + backgroundColor={isSemiMobile() ? "rgba(0,0,0,0.6)" : "rgba(0,0,0,0.4)"} target={ open.set(true)}> diff --git a/frontend/src/components/topbar/Topbar.tsx b/frontend/src/components/topbar/Topbar.tsx index 145a7d4c7..e01bcade7 100644 --- a/frontend/src/components/topbar/Topbar.tsx +++ b/frontend/src/components/topbar/Topbar.tsx @@ -29,7 +29,7 @@ const Topbar: Component = () => { diff --git a/frontend/src/components/topbar/topbar.module.scss b/frontend/src/components/topbar/topbar.module.scss index 888441d14..fddfbac80 100644 --- a/frontend/src/components/topbar/topbar.module.scss +++ b/frontend/src/components/topbar/topbar.module.scss @@ -1,9 +1,6 @@ @use "../../style/colors.scss" as c; .Topbar { - grid-area: topbar; - width: 100vw; - max-width: 1200px; box-sizing: border-box; background-color: c.$grey; z-index: 90; diff --git a/frontend/src/style/app.scss b/frontend/src/style/app.scss index 4b571888a..6ab1ffc90 100644 --- a/frontend/src/style/app.scss +++ b/frontend/src/style/app.scss @@ -3,14 +3,12 @@ .app { display: grid; grid-template-columns: 1fr; - grid-template-rows: auto auto; gap: 1rem; padding: 1rem; + width: 100vw; + max-width: calc(1200px + 2rem); box-sizing: border-box; - grid-template-areas: - "topbar" - "content"; - place-items: start center; + place-items: center; } @media only screen and (max-width: 1200px) { diff --git a/frontend/src/style/index.scss b/frontend/src/style/index.scss index 36d6754e8..c0af4c3cb 100644 --- a/frontend/src/style/index.scss +++ b/frontend/src/style/index.scss @@ -10,6 +10,10 @@ body { background-color: c.$darkgrey; color: c.$app-color; + + display: grid; + grid-template-columns: 1fr; + place-items: center; } code { @@ -96,6 +100,12 @@ input { -webkit-appearance: none; } +@media only screen and (max-width: 700px) { + input { + width: 200px; + } +} + input:focus { outline: solid 1px rgba(c.$lightgrey, 0.7); } diff --git a/frontend/src/util/helpers.ts b/frontend/src/util/helpers.ts index 2fb59ee36..9ea62c38e 100644 --- a/frontend/src/util/helpers.ts +++ b/frontend/src/util/helpers.ts @@ -211,4 +211,12 @@ export function convert_timelength_to_ms(timelength: Timelength) { } else if (timelength === Timelength.OneMinute) { return 60000; } +} + +export function readableStorageAmount(gb: number) { + if (gb > 512) { + return `${(gb / 1024).toFixed(1)} TB` + } else { + return `${gb.toFixed()} GiB` + } } \ No newline at end of file