starred/komodo
1
0
Fork 0
mirror of https://github.com/moghtech/komodo.git synced 2026-09-11 16:01:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Not found and some random changes

Browse Source
This commit is contained in:
mbecker20
2022-04-18 04:05:52 -07:00
parent d135f43727
commit 3adf31612a
12 changed files with 181 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+65 -18
View File
@@ -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<JSXElement>();
createEffect(() => {
if (selected.id()) {
}
switch (selected.type()) {
case "home":
setElement(
<div class="content-enter">
<Home />
</div>
);
return;
case "deployment":
setElement(
<div class="content-enter">
<Deployment />
</div>
);
break;
case "build":
setElement(
<div class="content-enter">
<Build />
</div>
);
break;
case "server":
setElement(
<div class="content-enter">
<Server />
</div>
);
break;
case "users":
if (permissions() > 1) {
setElement(
<div class="content-enter">
<Users />
</div>
);
} else {
setElement(
<div class="content-enter">
<Home />
</div>
);
}
break;
}
});
return (
<>
<Topbar />
<Sidebar />
<Switch>
<Match when={selected.type() === "home"}>
<Home />
</Match>
<Match when={selected.type() === "deployment"}>
<Deployment />
</Match>
<Match when={selected.type() === "server"}>
<Server />
</Match>
<Match when={selected.type() === "build"}>
<Build />
</Match>
<Match when={selected.type() === "users" && permissions() > 1}>
<Users />
</Match>
</Switch>
{element()}
</>
);
};
frontend/src/components/NotFound.tsx
+19
View File
@@ -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 (
<Grid
placeItems="center"
style={{ height: "100%", width: "100%" }}
>
<Grid placeItems="center" style={{ width: "fit-content", height: "fit-content" }}>
<h2>{p.type} at id not found</h2>
<Loading type="sonar" />
</Grid>
</Grid>
);
}
export default NotFound;
frontend/src/components/builds/Build.tsx
+4 -1
View File
@@ -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 (
<Show when={build()}>
<Show when={build()} fallback={<NotFound type="build" />}>
<ActionStateProvider>
<Grid class="content">
{/* left / actions */}
frontend/src/components/deployment/Deployment.tsx
+6 -18
View File
@@ -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 (
<Show
when={deployment() && server()}
fallback={
<Grid
class={combineClasses(
"content",
p.exiting ? "content-exit" : "content-enter"
)}
>
<div class="left-content">deployment at id not found</div>
</Grid>
}
fallback={<NotFound type="deployment" />}
>
<ActionStateProvider>
<Grid
class={combineClasses(
"content",
p.exiting ? "content-exit" : "content-enter"
)}
>
<Grid class="content">
{/* left / actions */}
<Grid class="left-content">
<Header />
frontend/src/components/home/Home.tsx
+1 -1
View File
@@ -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";
frontend/src/components/home/home.module.scss
-1
View File
@@ -1,7 +1,6 @@
@use "../../style/colors.scss" as c;
.Home {
grid-area: content;
padding: 1rem;
}
frontend/src/components/server/Server.tsx
+4 -1
View File
@@ -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 (
<Show when={server()}>
<Show when={server()} fallback={<NotFound type="server" />}>
<ActionStateProvider>
<Grid class="content">
{/* left / actions */}
frontend/src/components/users/Users.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ const Users: Component<{}> = (p) => {
<Show
when={users()}
fallback={
<Grid placeItems="center">
<Grid placeItems="center" class="content">
<Loading type="sonar" />
</Grid>
}
frontend/src/components/users/users.module.scss
-1
View File
@@ -1,7 +1,6 @@
@use "../../style/colors.scss" as c;
.UsersContent {
grid-area: content;
padding: 1rem;
}
frontend/src/components/util/tabs/Tabs.tsx
+2 -2
View File
@@ -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<{
)}
</For>
</Flex>
{current().element}
{tabs()[current()].element}
</div>
);
};
frontend/src/state/hooks.ts
+73 -75
View File
@@ -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<typeof getUpdates>[0]) {
@@ -171,12 +169,12 @@ export function useUpdates(query?: Parameters<typeof getUpdates>[0]) {
setNoMore(true);
}
}
}
};
return {
noMore,
loadMore,
...updates
}
...updates,
};
}
export function useArray<T>(query: () => Promise<T[]>) {
frontend/src/style/app.scss
+6 -5
View File
@@ -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 {