can create and delete

frontend/src/components/create/Deployment.tsx

@@ -38,7 +38,6 @@ const Content: Component<{ serverID: string; close: () => void }> = (p) => {
       ws.send(CREATE_DEPLOYMENT, {
         deployment: defaultDeployment(name(), p.serverID),
       });
-      pushNotification("ok", "creating deployment...");
       p.close();
     }
   };

frontend/src/components/deployment/Deployment.tsx

@@ -33,7 +33,6 @@ const Deployment: Component<{ id: string }> = (p) => {
             </Grid>
             <ConfirmButton
               onConfirm={() => {
-                pushNotification("ok", "deleting deployment...")
                 ws.send(DELETE_DEPLOYMENT, { deploymentID: p.id });
               }}
               color="red"

frontend/src/components/topbar/topbar.module.css

@@ -11,11 +11,17 @@
 }
 
 .Updates {
-	width: 300px;
+	width: 340px;
 	color: rgb(231, 225, 225);
 	z-index: 25;
 }
 
+.UpdatesContainer {
+	max-height: 70vh;
+	overflow: scroll;
+	padding-right: 1rem;
+}
+
 .Update {
 	background-color: brown;
 	padding: 0.5rem;

frontend/src/components/topbar/updates/Update.tsx

@@ -1,7 +1,7 @@
 import { Update as UpdateType } from "@monitor/types";
 import { Component, Show } from "solid-js";
 import { useAppState } from "../../../state/StateProvider";
-import { readableTimestamp } from "../../../util/helpers";
+import { readableOperation, readableTimestamp } from "../../../util/helpers";
 import Icon from "../../util/icons/Icon";
 import Flex from "../../util/layout/Flex";
 import Grid from "../../util/layout/Grid";
@@ -30,8 +30,10 @@ const Update: Component<{ update: UpdateType }> = (p) => {
           "grid-template-rows": "1fr 1fr",
         }}
       >
-        <div>{p.update.operation}</div>
-        <div style={{ "place-self": "center end" }}>{readableTimestamp(p.update.timestamp)}</div>
+        <div>{readableOperation(p.update.operation)}</div>
+        <div style={{ "place-self": "center end" }}>
+          {readableTimestamp(p.update.timestamp)}
+        </div>
         <Flex>
           <Icon type="user" />
           <div>{p.update.operator}</div>

frontend/src/components/topbar/updates/Updates.tsx

@@ -9,10 +9,20 @@ const Updates: Component<{}> = (p) => {
   return (
     <Show when={updates.loaded()}>
       <Grid class={s.Updates}>
-        <div style={{ "font-size": "1.5rem", "font-weight": 500, "place-self": "center end" }}>updates</div>
-        <For each={updates.collection()!}>
-          {(update) => <Update update={update} />}
-        </For>
+        <div
+          style={{
+            "font-size": "1.5rem",
+            "font-weight": 500,
+            "place-self": "center end",
+          }}
+        >
+          updates
+        </div>
+        <Grid class={s.UpdatesContainer}>
+          <For each={updates.collection()!}>
+            {(update) => <Update update={update} />}
+          </For>
+        </Grid>
       </Grid>
     </Show>
   );

frontend/src/state/socket.ts

@@ -1,3 +1,4 @@
+import { Update } from "@monitor/types";
 import { client, pushNotification, WS_URL } from "..";
 import {
   ADD_SERVER,
@@ -11,6 +12,7 @@ import {
   UPDATE_DEPLOYMENT,
   UPDATE_SERVER,
 } from "../state/actions";
+import { readableOperation } from "../util/helpers";
 import { State } from "./StateProvider";
 
 function socket(state: State) {
@@ -84,10 +86,11 @@ function handleMessage(
 
     /* Updates */
     case ADD_UPDATE:
-      updates.push(message.update);
+      const { update } = message as { update: Update };
+      updates.push(update);
       pushNotification(
-        message.update.isError ? "bad" : "good",
-        `${message.update.operation} by ${message.update.operator}`
+        update.isError ? "bad" : "good",
+        `${readableOperation(update.operation)} by ${update.operator}`
       );
       break;
   }

frontend/src/util/helpers.ts

@@ -44,11 +44,14 @@ export function filterOutFromObj<T>(obj: T, idsToFilterOut: string[]) {
 
 export function readablePermissions(permissions: number) {
   switch (permissions) {
-    case 0: return "view only"
-        
-    case 1: return "user"
+    case 0:
+      return "view only";
 
-    case 2: return "admin"
+    case 1:
+      return "user";
+
+    case 2:
+      return "admin";
   }
 }
 
@@ -63,3 +66,7 @@ export function readableTimestamp(unixTimeInSecs: number) {
     minutes > 9 ? minutes : "0" + minutes
   } ${pm ? "PM" : "AM"}`;
 }
+
+export function readableOperation(operation: string) {
+  return operation.toLowerCase().replace("_", " ");
+}