diff --git a/core/src/routes/deployments.ts b/core/src/routes/deployments.ts index 6187e943a..7f16bfd35 100644 --- a/core/src/routes/deployments.ts +++ b/core/src/routes/deployments.ts @@ -13,35 +13,73 @@ import { getPeripheryContainers, } from "../util/periphery/container"; +async function getDeployments(app: FastifyInstance, serverID: string) { + const server = await app.servers.findById(serverID); + if (!server) return {}; + const deployments = await app.deployments.find( + { serverID: server._id }, + "name containerName serverID owners repo" + ); + const status = server.isCore + ? await deploymentStatusLocal(app) + : await getPeripheryContainers(server); + return intoCollection( + deployments.map((deployment) => ({ + ...deployment, + status: status[deployment.containerName!] || "not deployed", + })) + ); +} + const deployments = fp((app: FastifyInstance, _: {}, done: () => void) => { + // app.get( + // "/api/deployments", + // { onRequest: [app.auth, app.userEnabled] }, + // async (req, res) => { + // // returns the periphery deployments on the given serverID + // // returns the core deployments if no serverID is specified + // const { serverID } = req.query as { serverID?: string }; + // const server = serverID ? await app.servers.findById(serverID) : app.core; + // if (!server) { + // res.status(400); + // res.send(); + // return; + // } + // const deployments = await app.deployments.find( + // { serverID: server._id }, + // "name containerName serverID owners repo" + // ); + // const status = server.isCore + // ? await deploymentStatusLocal(app) + // : await getPeripheryContainers(server); + // res.send( + // intoCollection( + // deployments.map((deployment) => ({ + // ...deployment, + // status: status[deployment.containerName!] || "not deployed", + // })) + // ) + // ); + // } + // ); + app.get( "/api/deployments", { onRequest: [app.auth, app.userEnabled] }, - async (req, res) => { - // returns the periphery deployments on the given serverID - // returns the core deployments if no serverID is specified - const { serverID } = req.query as { serverID?: string }; - const server = serverID ? await app.servers.findById(serverID) : app.core; - if (!server) { - res.status(400); - res.send(); - return; - } - const deployments = await app.deployments.find( - { serverID: server._id }, - "name containerName serverID owners repo" - ); - const status = server.isCore - ? await deploymentStatusLocal(app) - : await getPeripheryContainers(server); - res.send( - intoCollection( - deployments.map((deployment) => ({ - ...deployment, - status: status[deployment.containerName!] || "not deployed", - })) + async (_, res) => { + // returns all the deployments + const servers = await app.servers.find({}); + const deployments = ( + await Promise.all( + servers.map((server) => getDeployments(app, server._id!)) ) - ); + ).reduce((acc, curr) => { + Object.keys(curr).forEach((id) => { + acc[id] = curr[id]; + }); + return acc; + }, {}); + res.send(deployments); } ); diff --git a/core/src/util/helpers.ts b/core/src/util/helpers.ts index f4f553a0b..6c864674b 100644 --- a/core/src/util/helpers.ts +++ b/core/src/util/helpers.ts @@ -11,4 +11,4 @@ export function sendAlert( message: string ) { client.send(JSON.stringify({ type: ALERT, status, message })) -} +} \ No newline at end of file diff --git a/frontend/src/components/deployment/Header.tsx b/frontend/src/components/deployment/Header.tsx index 9be80ec78..f4f0d503e 100644 --- a/frontend/src/components/deployment/Header.tsx +++ b/frontend/src/components/deployment/Header.tsx @@ -14,11 +14,68 @@ const Header: Component<{}> = (p) => { const { servers, deployments, ws, selected } = useAppState(); const deployment = () => deployments.get(selected.id()); const server = () => deployment() && servers.get(deployment()?.serverID!); - const status = () => + const state = () => deployment()!.status === "not deployed" ? "not deployed" : (deployment()!.status as ContainerStatus).State; + const status = () => + deployment()!.status === "not deployed" + ? undefined + : (deployment()!.status as ContainerStatus).Status.toLowerCase(); const actions = useActionStates(); + return ( + + +

{deployment()!.name}

+ + + + } + > + { + ws.send(DELETE_DEPLOYMENT, { deploymentID: selected.id() }); + }} + color="red" + > + + + } + content="delete deployment" + position="bottom center" + padding="0.5rem" + /> + + + + selected.set(deployment()?.serverID!, "server")} + > + {server()!.name} + + } + content="show server" + position="bottom center" + padding="0.5rem" + /> + +
{state()}
+ +
{status()}
+ + + + + ); return ( = (p) => { -
{status()}
+ +
{state()}
+ +
{status()}
+ + = (p) => { (id) => permissions() > 1 || servers.get(id)!.owners.includes(username()!) ); + const deploymentState = (id: string) => + deployments.get(id)!.status === "not deployed" + ? "not deployed" + : (deployments.get(id)!.status as ContainerStatus).State; + const deploymentStatus = (id: string) => + deployments.get(id)!.status === "not deployed" + ? undefined + : (deployments.get(id)!.status as ContainerStatus).Status.toLowerCase(); return ( @@ -46,19 +54,15 @@ const Home: Component<{}> = (p) => { )} @@ -70,7 +74,11 @@ const Home: Component<{}> = (p) => {

my servers

{(id) => ( - )} diff --git a/frontend/src/components/sidebar/server/Server.tsx b/frontend/src/components/sidebar/server/Server.tsx index 383b58846..a4798fa88 100644 --- a/frontend/src/components/sidebar/server/Server.tsx +++ b/frontend/src/components/sidebar/server/Server.tsx @@ -22,13 +22,13 @@ const Server: Component<{ id: string }> = (p) => { ); }); const [open, toggleOpen] = useLocalStorageToggle(p.id); - createEffect(() => { - if (server() && !server()!.isCore) { - getDeployments({ serverID: p.id }).then((more) => - deployments.addMany(more) - ); - } - }); + // createEffect(() => { + // if (server() && !server()!.isCore) { + // getDeployments({ serverID: p.id }).then((more) => + // deployments.addMany(more) + // ); + // } + // }); return (
@@ -42,7 +42,7 @@ const Server: Component<{ id: string }> = (p) => { > -
{server()?.name}
+

{server()?.name}
val); - if (type !== selected().type || id !== selected().id) { - history.replaceState( - { id, type }, - "", - `${selected().type}/${selected().id}` - ); - setFirstLoad(false); + 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 ( @@ -69,7 +74,6 @@ export function useSelected({ servers, builds, deployments }: State) { "", `${selected().type}/${selected().id}` ); - setFirstLoad(false); } } setFirstLoad(false); @@ -123,8 +127,8 @@ export function useBuilds() { return useCollection(getBuilds); } -export function useDeployments(query?: Parameters[0]) { - return useCollection(() => getDeployments(query)); +export function useDeployments() { + return useCollection(getDeployments); } export function useUpdates(query?: Parameters[0]) { diff --git a/frontend/src/style/colors.scss b/frontend/src/style/colors.scss index 43730e8e5..901104526 100644 --- a/frontend/src/style/colors.scss +++ b/frontend/src/style/colors.scss @@ -1,8 +1,8 @@ $app-color: #fceade; -$lightgrey: #414852; -$grey: #2c3137; -$darkgrey: #1c1f23; +$lightgrey: #3f454d; +$grey: #25292e; +$darkgrey: #16181b; $lightblue: #1c63cd; $blue: #184e9f; diff --git a/frontend/src/style/index.scss b/frontend/src/style/index.scss index 6bb818775..1913ec479 100644 --- a/frontend/src/style/index.scss +++ b/frontend/src/style/index.scss @@ -1,9 +1,18 @@ @use "colors" as c; @import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Work+Sans&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Tajawal&display=swap"); body { margin: 0; - font-family: "Chakra Petch", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + // font-family: "Chakra Petch", sans-serif; + // font-family: "Work Sans", sans-serif; + // font-family: 'Ubuntu Mono', monospace; + // font-family: "Tajawal", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -82,7 +91,6 @@ input::placeholder { background-color: rgba(c.$grey, 0.8); } - .grey { background-color: rgba(c.$grey, 0.8); } diff --git a/frontend/src/util/query.ts b/frontend/src/util/query.ts index 7ea9e1215..f630d31e5 100644 --- a/frontend/src/util/query.ts +++ b/frontend/src/util/query.ts @@ -39,24 +39,16 @@ export async function getBuildActionState(buildID: string) { ); } -export async function addOwnerToBuild( - buildID: string, - username: string -) { +export async function addOwnerToBuild(buildID: string, username: string) { return await client.post(`/api/build/${buildID}/${username}`); } -export async function removeOwnerFromBuild( - buildID: string, - username: string -) { +export async function removeOwnerFromBuild(buildID: string, username: string) { return await client.delete(`/api/build/${buildID}/${username}`); } -export async function getDeployments(query?: { serverID?: string }) { - return await client.get( - "/api/deployments" + generateQuery(query) - ); +export async function getDeployments() { + return await client.get("/api/deployments"); } export async function getDeployment(deploymentID: string) { @@ -107,7 +99,10 @@ export async function addOwnerToServer(serverID: string, username: string) { return await client.post(`/api/server/${serverID}/${username}`); } -export async function removeOwnerFromServer(serverID: string, username: string) { +export async function removeOwnerFromServer( + serverID: string, + username: string +) { return await client.delete(`/api/server/${serverID}/${username}`); }