From a6d655b42ef18d725152be419de0fb45b9445252 Mon Sep 17 00:00:00 2001 From: mbecker20 Date: Mon, 2 Jan 2023 06:33:18 +0000 Subject: [PATCH] add usernames cache to state --- .../src/components/home/Tree/AddServer.tsx | 2 +- .../src/components/home/Updates/Update.tsx | 4 +- .../server/StatGraphs/StatGraphs.tsx | 2 +- .../src/components/shared/menu/CenterMenu.tsx | 6 +- frontend/src/components/update/Update.tsx | 60 +++------ frontend/src/components/update/UpdateMenu.tsx | 120 ++++++++++-------- .../src/components/update/update.module.scss | 6 +- frontend/src/state/StateProvider.tsx | 4 + frontend/src/state/hooks.ts | 25 ++++ frontend/src/state/ws.ts | 5 +- 10 files changed, 121 insertions(+), 113 deletions(-) diff --git a/frontend/src/components/home/Tree/AddServer.tsx b/frontend/src/components/home/Tree/AddServer.tsx index 64466e7d7..76b1a5f6d 100644 --- a/frontend/src/components/home/Tree/AddServer.tsx +++ b/frontend/src/components/home/Tree/AddServer.tsx @@ -18,7 +18,7 @@ const AddServer: Component<{}> = () => { target="add server" targetClass="green shadow" targetStyle={{ width: "100%" }} - content={} + content={() => } position="center" /> ); diff --git a/frontend/src/components/home/Updates/Update.tsx b/frontend/src/components/home/Updates/Update.tsx index 7639832b0..bdae00615 100644 --- a/frontend/src/components/home/Updates/Update.tsx +++ b/frontend/src/components/home/Updates/Update.tsx @@ -12,7 +12,7 @@ import UpdateMenu from "../../update/UpdateMenu"; import s from "./update.module.scss"; const Update: Component<{ update: UpdateType }> = (p) => { - const { deployments, servers, builds } = useAppState(); + const { deployments, servers, builds, usernames } = useAppState(); const name = () => { if (p.update.target.type === "Deployment" && deployments.loaded()) { return deployments.get(p.update.target.id!)?.deployment.name || "deleted"; @@ -53,7 +53,7 @@ const Update: Component<{ update: UpdateType }> = (p) => { -
{p.update.operator}
+
{usernames.get(p.update.operator)}
 diff --git a/frontend/src/components/server/StatGraphs/StatGraphs.tsx b/frontend/src/components/server/StatGraphs/StatGraphs.tsx index 595b0d46c..d53805fc9 100644 --- a/frontend/src/components/server/StatGraphs/StatGraphs.tsx +++ b/frontend/src/components/server/StatGraphs/StatGraphs.tsx @@ -16,7 +16,7 @@ const StatGraphs: Component<{ id: string }> = (p) => { toggleShow={toggleShow} target={} targetClass="blue" - content={} + content={() => } title={`${name()} stats`} /> ); diff --git a/frontend/src/components/shared/menu/CenterMenu.tsx b/frontend/src/components/shared/menu/CenterMenu.tsx index 2d9f5de9d..406489fb4 100644 --- a/frontend/src/components/shared/menu/CenterMenu.tsx +++ b/frontend/src/components/shared/menu/CenterMenu.tsx @@ -17,7 +17,7 @@ import s from "./menu.module.scss"; const CenterMenu: Component<{ show: Accessor; toggleShow: () => void; - content: JSXElement; + content: () => JSXElement; target: JSXElement; targetStyle?: JSX.CSSProperties; targetClass?: string; @@ -58,7 +58,7 @@ const CenterMenu: Component<{ const Child: Component<{ title?: string; - content: JSXElement; + content: () => JSXElement; show: Accessor; toggleShow: () => void; padding?: string | number; @@ -95,7 +95,7 @@ const Child: Component<{ - {p.content} + {p.content()} ); diff --git a/frontend/src/components/update/Update.tsx b/frontend/src/components/update/Update.tsx index ecfc312af..5e428c265 100644 --- a/frontend/src/components/update/Update.tsx +++ b/frontend/src/components/update/Update.tsx @@ -1,68 +1,38 @@ -import { Component, For, Show } from "solid-js"; +import { Component, Show } from "solid-js"; import { useAppState } from "../../state/StateProvider"; import { Update as UpdateType } from "../../types"; import { combineClasses, - readableDuration, readableMonitorTimestamp, } from "../../util/helpers"; -import { useToggle } from "../../util/hooks"; import Icon from "../shared/Icon"; import Flex from "../shared/layout/Flex"; import Grid from "../shared/layout/Grid"; -import CenterMenu from "../shared/menu/CenterMenu"; import s from "./update.module.scss"; import UpdateMenu from "./UpdateMenu"; -const Update: Component<{ update: UpdateType; showName: boolean }> = (p) => { - const { deployments, servers, builds } = useAppState(); - const name = () => { - if (p.update.target.type === "Deployment" && deployments.loaded()) { - return deployments.get(p.update.target.id!)?.deployment.name || "deleted"; - } else if (p.update.target.type === "Server" && servers.loaded()) { - return servers.get(p.update.target.id)?.server.name || "deleted"; - } else if (p.update.target.type === "Build" && builds.loaded()) { - return builds.get(p.update.target.id)?.name || "deleted"; - } else { - return "monitor"; - } - }; +const Update: Component<{ update: UpdateType }> = (p) => { + const { usernames } = useAppState(); const operation = () => { return p.update.operation.replaceAll("_", " ") }; - const [showLog, toggleShowLog] = useToggle(); return ( - - -

{name()}

- - +
-
- {operation()} -
-
- {readableMonitorTimestamp(p.update.start_ts)} -
- - -
{p.update.operator}
- + {operation()} +
+
{readableMonitorTimestamp(p.update.start_ts)}
+ + +
{usernames.get(p.update.operator)}
+ + - + ); }; diff --git a/frontend/src/components/update/UpdateMenu.tsx b/frontend/src/components/update/UpdateMenu.tsx index 9f9be0417..d057ce201 100644 --- a/frontend/src/components/update/UpdateMenu.tsx +++ b/frontend/src/components/update/UpdateMenu.tsx @@ -1,4 +1,5 @@ -import { Component, For, Show } from "solid-js"; +import { Component, createResource, For, Show } from "solid-js"; +import { client } from "../.."; import { useAppState } from "../../state/StateProvider"; import { Update as UpdateType } from "../../types"; import { combineClasses, readableDuration, readableMonitorTimestamp } from "../../util/helpers"; @@ -36,63 +37,70 @@ const UpdateMenu: Component<{ update: UpdateType }> = (p) => { targetClass="blue" padding="1rem 2rem" content={ - - -
started at: {readableMonitorTimestamp(p.update.start_ts)}
- -
- duration:{" "} - {readableDuration(p.update.start_ts, p.update.end_ts!)} -
- - - - {(log, index) => { - return ( - - -

{log.stage}

-
- (stage {index() + 1} of {p.update.logs.length}) -
-
- {readableDuration(log.start_ts, log.end_ts)} -
- - -
command
- 
{log.command}
- - -
stdout
- 
-                      {log.stdout}
-
- - -
stderr
- 
-                      {log.stderr}
-
- - - ); - }} - - + () => } /> ); }; -export default UpdateMenu; \ No newline at end of file +export default UpdateMenu; + +const UpdateMenuContent: Component<{ update: UpdateType }> = (p) => { + const { usernames } = useAppState(); + return ( + + +
operator: {usernames.get(p.update.operator)}
+
started at: {readableMonitorTimestamp(p.update.start_ts)}
+ +
+ duration: {readableDuration(p.update.start_ts, p.update.end_ts!)} +
+ + + + {(log, index) => { + return ( + + +

{log.stage}

+
+ (stage {index() + 1} of {p.update.logs.length}) +
+
+ {readableDuration(log.start_ts, log.end_ts)} +
+ + +
command
+ 
{log.command}
+ + +
stdout
+ 
+                  {log.stdout}
+
+ + +
stderr
+ 
+                  {log.stderr}
+
+ + + ); + }} + + + ); +} \ No newline at end of file diff --git a/frontend/src/components/update/update.module.scss b/frontend/src/components/update/update.module.scss index 5644b77af..ed0959609 100644 --- a/frontend/src/components/update/update.module.scss +++ b/frontend/src/components/update/update.module.scss @@ -14,7 +14,9 @@ .Update { background-color: c.$lightgrey; padding: 0.75rem; - height: 90px; + height: 70px; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; transform-origin: top; animation-name: Enter; animation-duration: 750ms; @@ -33,7 +35,7 @@ } .Update.NoName { - height: 70px; + // height: 70px; animation-name: EnterNoName; } diff --git a/frontend/src/state/StateProvider.tsx b/frontend/src/state/StateProvider.tsx index 5edcdd985..b8427d92b 100644 --- a/frontend/src/state/StateProvider.tsx +++ b/frontend/src/state/StateProvider.tsx @@ -7,12 +7,14 @@ import { useServers, useServerStats, useUpdates, + useUsernames, } from "./hooks"; import connectToWs from "./ws"; import { useUser } from "./UserProvider"; import { PermissionLevel } from "../types"; export type State = { + usernames: ReturnType servers: ReturnType; getPermissionOnServer: (id: string) => PermissionLevel; serverStats: ReturnType; @@ -37,7 +39,9 @@ export const AppStateProvider: ParentComponent = (p) => { const servers = useServers(); const builds = useBuilds(); const deployments = useDeployments(); + const usernames = useUsernames(); const state: State = { + usernames, servers, getPermissionOnServer: (id: string) => { const server = servers.get(id)!; diff --git a/frontend/src/state/hooks.ts b/frontend/src/state/hooks.ts index 1c58134e2..7048440e0 100644 --- a/frontend/src/state/hooks.ts +++ b/frontend/src/state/hooks.ts @@ -45,6 +45,31 @@ export function useServerStats() { }; } +export function useUsernames() { + const [usernames, set] = createSignal>( + {} + ); + const load = async (userID: string) => { + const username = await client.get_username(userID); + set((s) => ({ ...s, [userID]: username })); + }; + const loading: Record = {}; + return { + get: (userID: string) => { + const username = usernames()[userID]; + if ( + username === undefined && + !loading[userID] + ) { + loading[userID] = true; + load(userID); + } + return username; + }, + load, + }; +} + const buildIdPath = ["_id", "$oid"]; export function useBuilds() { diff --git a/frontend/src/state/ws.ts b/frontend/src/state/ws.ts index ea6e3df08..5d56ff9fd 100644 --- a/frontend/src/state/ws.ts +++ b/frontend/src/state/ws.ts @@ -42,9 +42,8 @@ function connectToWs(state: State) { return { subscribe: (operations: Operation[], callback: (update: Update) => void) => { const listener = ({ data }: { data: string }) => { - if (data === "PONG") { - return; - } + if (data === "PONG") return; + if (data = "LOGGED_IN") return; const update = JSON.parse(data) as Update; if (operations.length === 0 || operations.includes(update.operation)) { callback(update);