From 3adf31612a9873f18d13c1bf367ec79cabe8b33f Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Mon, 18 Apr 2022 04:05:52 -0700 Subject: [PATCH] Not found and some random changes --- frontend/src/App.tsx | 83 +++++++--- frontend/src/components/NotFound.tsx | 19 +++ frontend/src/components/builds/Build.tsx | 5 +- .../src/components/deployment/Deployment.tsx | 24 +-- frontend/src/components/home/Home.tsx | 2 +- frontend/src/components/home/home.module.scss | 1 - frontend/src/components/server/Server.tsx | 5 +- frontend/src/components/users/Users.tsx | 2 +- .../src/components/users/users.module.scss | 1 - frontend/src/components/util/tabs/Tabs.tsx | 4 +- frontend/src/state/hooks.ts | 148 +++++++++--------- frontend/src/style/app.scss | 11 +- 12 files changed, 181 insertions(+), 124 deletions(-) create mode 100644 frontend/src/components/NotFound.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index f910579bc..5dcc16a15 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,4 +1,13 @@ -import { Component, Match, Switch } from "solid-js"; +import { Collection } from "@monitor/types"; +import { + Component, + createEffect, + createSignal, + JSXElement, + Match, + Switch, +} from "solid-js"; +import { createStore } from "solid-js/store"; import Build from "./components/builds/Build"; import Deployment from "./components/deployment/Deployment"; import Home from "./components/home/Home"; @@ -12,27 +21,65 @@ import { useUser } from "./state/UserProvider"; const App: Component = () => { const { selected } = useAppState(); const { permissions } = useUser(); + const [element, setElement] = createSignal(); + createEffect(() => { + if (selected.id()) { + } + switch (selected.type()) { + case "home": + setElement( +
+ +
+ ); + return; + + case "deployment": + setElement( +
+ +
+ ); + break; + + case "build": + setElement( +
+ +
+ ); + break; + + case "server": + setElement( +
+ +
+ ); + break; + + case "users": + if (permissions() > 1) { + setElement( +
+ +
+ ); + } else { + setElement( +
+ +
+ ); + } + break; + } + }); return ( <> - - - - - - - - - - - - - - 1}> - - - + {element()} ); }; diff --git a/frontend/src/components/NotFound.tsx b/frontend/src/components/NotFound.tsx new file mode 100644 index 000000000..ed7fb4531 --- /dev/null +++ b/frontend/src/components/NotFound.tsx @@ -0,0 +1,19 @@ +import { Component } from "solid-js"; +import Grid from "./util/layout/Grid"; +import Loading from "./util/loading/Loading"; + +const NotFound: Component<{ type: "deployment" | "server" | "build" }> = (p) => { + return ( + + +

{p.type} at id not found

+ + + + ); +} + +export default NotFound; \ No newline at end of file diff --git a/frontend/src/components/builds/Build.tsx b/frontend/src/components/builds/Build.tsx index 1f20ac71e..4794cfe4f 100644 --- a/frontend/src/components/builds/Build.tsx +++ b/frontend/src/components/builds/Build.tsx @@ -1,6 +1,9 @@ import { Component, Show } from "solid-js"; import { useAppState } from "../../state/StateProvider"; +import { combineClasses } from "../../util/helpers"; +import NotFound from "../NotFound"; import Grid from "../util/layout/Grid"; +import Loading from "../util/loading/Loading"; import Actions from "./Actions"; import { ActionStateProvider } from "./ActionStateProvider"; import Header from "./Header"; @@ -11,7 +14,7 @@ const Build: Component<{}> = (p) => { const { builds, selected } = useAppState(); const build = () => builds.get(selected.id())!; return ( - + }> {/* left / actions */} diff --git a/frontend/src/components/deployment/Deployment.tsx b/frontend/src/components/deployment/Deployment.tsx index 9425a8358..470d7680b 100644 --- a/frontend/src/components/deployment/Deployment.tsx +++ b/frontend/src/components/deployment/Deployment.tsx @@ -1,38 +1,26 @@ import { Component, Show } from "solid-js"; import { useAppState } from "../../state/StateProvider"; import { combineClasses } from "../../util/helpers"; +import NotFound from "../NotFound"; import Grid from "../util/layout/Grid"; +import Loading from "../util/loading/Loading"; import Actions from "./Actions"; import { ActionStateProvider } from "./ActionStateProvider"; import Header from "./Header"; import DeploymentTabs from "./tabs/Tabs"; import Updates from "./Updates"; -const Deployment: Component<{ exiting?: boolean }> = (p) => { +const Deployment: Component<{}> = (p) => { const { servers, deployments, selected } = useAppState(); - const deployment = () => deployments.get(selected.prevId()!); + const deployment = () => deployments.get(selected.id()!); const server = () => deployment() && servers.get(deployment()?.serverID!); return ( -
deployment at id not found
- - } + fallback={} > - + {/* left / actions */}
diff --git a/frontend/src/components/home/Home.tsx b/frontend/src/components/home/Home.tsx index d7827f11f..e33462ae9 100644 --- a/frontend/src/components/home/Home.tsx +++ b/frontend/src/components/home/Home.tsx @@ -1,7 +1,7 @@ import { Component, For, Show } from "solid-js"; import { useAppState } from "../../state/StateProvider"; import { useUser } from "../../state/UserProvider"; -import { deploymentStatusClass, inPx, serverStatusClass } from "../../util/helpers"; +import { combineClasses, deploymentStatusClass, inPx, serverStatusClass } from "../../util/helpers"; import Circle from "../util/Circle"; import Flex from "../util/layout/Flex"; import Grid from "../util/layout/Grid"; diff --git a/frontend/src/components/home/home.module.scss b/frontend/src/components/home/home.module.scss index 7ce46549a..2895bfd35 100644 --- a/frontend/src/components/home/home.module.scss +++ b/frontend/src/components/home/home.module.scss @@ -1,7 +1,6 @@ @use "../../style/colors.scss" as c; .Home { - grid-area: content; padding: 1rem; } diff --git a/frontend/src/components/server/Server.tsx b/frontend/src/components/server/Server.tsx index 99e11c931..ef468c960 100644 --- a/frontend/src/components/server/Server.tsx +++ b/frontend/src/components/server/Server.tsx @@ -1,6 +1,9 @@ import { Component, Show } from "solid-js"; import { useAppState } from "../../state/StateProvider"; +import { combineClasses } from "../../util/helpers"; +import NotFound from "../NotFound"; import Grid from "../util/layout/Grid"; +import Loading from "../util/loading/Loading"; import Actions from "./Actions"; import { ActionStateProvider } from "./ActionStateProvider"; import Header from "./Header"; @@ -11,7 +14,7 @@ const Server: Component<{}> = (p) => { const { servers, selected } = useAppState(); const server = () => servers.get(selected.id())!; return ( - + }> {/* left / actions */} diff --git a/frontend/src/components/users/Users.tsx b/frontend/src/components/users/Users.tsx index cea372b43..eeab471af 100644 --- a/frontend/src/components/users/Users.tsx +++ b/frontend/src/components/users/Users.tsx @@ -32,7 +32,7 @@ const Users: Component<{}> = (p) => { + } diff --git a/frontend/src/components/users/users.module.scss b/frontend/src/components/users/users.module.scss index 34196b9cb..6b9d4e285 100644 --- a/frontend/src/components/users/users.module.scss +++ b/frontend/src/components/users/users.module.scss @@ -1,7 +1,6 @@ @use "../../style/colors.scss" as c; .UsersContent { - grid-area: content; padding: 1rem; } diff --git a/frontend/src/components/util/tabs/Tabs.tsx b/frontend/src/components/util/tabs/Tabs.tsx index b97ef2649..99531dc36 100644 --- a/frontend/src/components/util/tabs/Tabs.tsx +++ b/frontend/src/components/util/tabs/Tabs.tsx @@ -51,7 +51,7 @@ export const ControlledTabs: Component<{ containerStyle?: JSX.CSSProperties; }> = (p) => { const tabs = createMemo(() => p.tabs.filter((val) => val) as Tab[]); - const current = () => tabs().filter((tab) => tab.title === p.selected())[0] || tabs()[0]; + const current = () => tabs().findIndex((tab) => tab.title === p.selected()) const getClassName = (title: string) => p.selected() === title ? combineClasses(s.Tab, s.Active) : s.Tab; return ( @@ -76,7 +76,7 @@ export const ControlledTabs: Component<{ )} - {current().element} + {tabs()[current()].element} ); }; diff --git a/frontend/src/state/hooks.ts b/frontend/src/state/hooks.ts index 4b31f72e8..9e8f47a8e 100644 --- a/frontend/src/state/hooks.ts +++ b/frontend/src/state/hooks.ts @@ -28,6 +28,14 @@ export function useSelected({ servers, builds, deployments }: State) { type: PageType; }>({ id: id || "", type: type || "home" }); + history.replaceState( + { type, id }, + "", + selected().type === "home" + ? location.origin + : `${location.origin}/${selected().type}/${selected().id}` + ); + const [prevSelected, setPrevSelected] = createSignal<{ id: string; type: PageType; @@ -37,78 +45,69 @@ export function useSelected({ servers, builds, deployments }: State) { setPrevSelected({ id: selected().id, type: selected().type }); setSelected({ id, type }); if (type === "home") { - history.pushState({ id, type }, "", `${location.origin}`); + history.pushState({ id, type }, "", location.origin); } else { history.pushState({ id, type }, "", `${location.origin}/${type}/${id}`); } }; - createEffect(() => { - if (firstLoad()) { - if (selected().type === "home") { - history.replaceState({ id: "", type: "home" }, "", "/"); - setFirstLoad(false); - } else if (selected().type === "deployment" && deployments.loaded()) { - if (!deployments.get(selected().id)) { - const id = deployments.ids()![0]; - set(id, "deployment"); - } else { - const [type, id] = location.pathname.split("/").filter((val) => val); - if (type !== selected().type || id !== selected().id) { - history.replaceState( - { type, id }, - "", - `${selected().type}/${selected().id}` - ); - setFirstLoad(false); - } - } - setFirstLoad(false); - } else if ( - selected().type === "server" && - servers.loaded() && - deployments.loaded() - ) { - if (!servers.get(selected().id)) { - const id = servers.ids()![0]; - set(id, "server"); - } else { - const [type, id] = location.pathname.split("/").filter((val) => val); - if (type !== selected().type || id !== selected().id) { - history.replaceState( - { type, id }, - "", - `${selected().type}/${selected().id}` - ); - } - } - setFirstLoad(false); - } else if ( - selected().type === "build" && - builds.loaded() && - deployments.loaded() - ) { - if (!builds.get(selected().id)) { - const id = builds.ids()![0]; - if (!id) { - set(deployments.ids()![0], "deployment"); - } else { - set(id, "build"); - } - } else { - const [type, id] = location.pathname.split("/").filter((val) => val); - if (type !== selected().type || id !== selected().id) { - history.replaceState( - { id, type }, - "", - `${selected().type}/${selected().id}` - ); - } - } - setFirstLoad(false); - } - } - }); + // createEffect(() => { + // if (firstLoad()) { + // if (selected().type === "home") { + // history.replaceState({ id: "", type: "home" }, "", "/"); + // setFirstLoad(false); + // } else if (selected().type === "deployment" && deployments.loaded()) { + // if (!deployments.get(selected().id)) { + // const id = deployments.ids()![0]; + // set(id, "deployment"); + // } else { + // } + // setFirstLoad(false); + // } else if ( + // selected().type === "server" && + // servers.loaded() && + // deployments.loaded() + // ) { + // if (!servers.get(selected().id)) { + // const id = servers.ids()![0]; + // set(id, "server"); + // } else { + // const [type, id] = location.pathname.split("/").filter((val) => val); + // if (type !== selected().type || id !== selected().id) { + // history.replaceState( + // { type, id }, + // "", + // `${selected().type}/${selected().id}` + // ); + // } + // } + // setFirstLoad(false); + // } else if ( + // selected().type === "build" && + // builds.loaded() && + // deployments.loaded() + // ) { + // if (!builds.get(selected().id)) { + // const id = builds.ids()![0]; + // if (!id) { + // set(deployments.ids()![0], "deployment"); + // } else { + // set(id, "build"); + // } + // } else { + // const [type, id] = location.pathname.split("/").filter((val) => val); + // if (type !== selected().type || id !== selected().id) { + // history.replaceState( + // { id, type }, + // "", + // `${selected().type}/${selected().id}` + // ); + // } + // } + // setFirstLoad(false); + // } + // } + // }); const popstate = (e: any) => { setSelected({ id: e.state.id, type: e.state.type }); @@ -137,26 +136,25 @@ export function useBuilds() { export function useDeployments() { const deployments = useCollection(getDeployments); - const state = (id: string) =>{ + const state = (id: string) => { const deployment = deployments.get(id)!; return deployment.status === "not deployed" || deployment.status === "unknown" ? deployment.status : (deployments.get(id)!.status as ContainerStatus).State; - } - ; + }; const status = (id: string) => { const deployment = deployments.get(id)!; return deployment.status === "not deployed" || deployment.status === "unknown" ? deployment.status : (deployments.get(id)!.status as ContainerStatus).Status.toLowerCase(); - } + }; return { ...deployments, status, state, - } + }; } export function useUpdates(query?: Parameters[0]) { @@ -171,12 +169,12 @@ export function useUpdates(query?: Parameters[0]) { setNoMore(true); } } - } + }; return { noMore, loadMore, - ...updates - } + ...updates, + }; } export function useArray(query: () => Promise) { diff --git a/frontend/src/style/app.scss b/frontend/src/style/app.scss index 636108652..c49f0f859 100644 --- a/frontend/src/style/app.scss +++ b/frontend/src/style/app.scss @@ -14,7 +14,6 @@ /* CONTENT */ .content { - grid-area: content; grid-template-columns: auto 2fr; background-color: c.$darkgrey; padding: 1rem; @@ -47,15 +46,17 @@ $anim-time: 500ms; .content-enter { - animation-name: content-enter; - animation-duration: $anim-time; - animation-timing-function: ease; + grid-area: content; + // animation-name: content-enter; + // animation-duration: $anim-time; + // animation-timing-function: ease-out; } .content-exit { + grid-area: content; animation-name: content-exit; animation-duration: $anim-time; - animation-timing-function: ease; + animation-timing-function: ease-out; } @keyframes content-enter {