From 02cd1379a0c17976ef83bfa10a616dcf629ee0d2 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Wed, 23 Mar 2022 22:06:29 -0700
Subject: [PATCH] deployment tabs and updates

---
 .../src/components/deployment/Actions.tsx     |  2 +-
 .../deployment/Deployment.module.css          | 17 +++++++++-
 .../src/components/deployment/Deployment.tsx  | 12 ++++---
 .../src/components/deployment/tabs/Config.tsx |  2 +-
 .../deployment/tabs/DeploymentTabs.tsx        | 34 ++++++++++++++-----
 .../components/deployment/tabs/ErrorLog.tsx   |  2 +-
 .../src/components/deployment/tabs/Log.tsx    |  2 +-
 .../components/deployment/updates/Update.tsx  |  9 ++---
 .../components/deployment/updates/Updates.tsx | 29 ++++++++++------
 frontend/src/components/topbar/Account.tsx    |  2 +-
 .../src/components/topbar/updates/Updates.tsx |  1 +
 11 files changed, 78 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/deployment/Actions.tsx b/frontend/src/components/deployment/Actions.tsx
index 6dbad852d..24bfba79a 100644
--- a/frontend/src/components/deployment/Actions.tsx
+++ b/frontend/src/components/deployment/Actions.tsx
@@ -8,7 +8,7 @@ import s from "./deployment.module.css";
 const Actions: Component<{ deployment: Deployment }> = (p) => {
   return (
     <Grid class={s.Actions}>
-      <div class={s.Header}>actions</div>
+      <div class={s.ItemHeader}>actions</div>
       <Flex alignItems="center" class={s.Action}>
         deploy:{" "}
         <button>
diff --git a/frontend/src/components/deployment/Deployment.module.css b/frontend/src/components/deployment/Deployment.module.css
index d5428c454..63ee56db8 100644
--- a/frontend/src/components/deployment/Deployment.module.css
+++ b/frontend/src/components/deployment/Deployment.module.css
@@ -1,6 +1,6 @@
 .Deployment {
 	grid-area: content;
-	grid-template-columns: 2fr 3fr;
+	grid-template-columns: 1fr 2fr;
 	background-color: rgb(49, 78, 112);
 	padding: 1rem;
 }
@@ -10,7 +10,13 @@
 }
 
 .Header {
+	background-color: rgb(35, 73, 115);
+	padding: 0.5rem;
+}
+
+.ItemHeader {
 	font-size: 1.5rem;
+	font-weight: 500;
 }
 
 .Actions {
@@ -20,4 +26,13 @@
 
 .Action {
 	background-color: rgb(35, 73, 115);
+}
+
+.Updates {
+	background-color: rgb(35, 73, 115);
+	padding: 0.5rem;
+}
+
+.Update {
+	background-color: rgb(35, 73, 115);
 }
\ No newline at end of file
diff --git a/frontend/src/components/deployment/Deployment.tsx b/frontend/src/components/deployment/Deployment.tsx
index 7b168a56c..5c51edf26 100644
--- a/frontend/src/components/deployment/Deployment.tsx
+++ b/frontend/src/components/deployment/Deployment.tsx
@@ -5,23 +5,27 @@ import Grid from "../util/layout/Grid";
 import Actions from "./Actions";
 import s from "./deployment.module.css";
 import DeploymentTabs from "./tabs/DeploymentTabs";
+import Updates from "./updates/Updates";
 
 const Deployment: Component<{ id: string }> = (p) => {
 	const { servers, deployments } = useAppState();
 	const deployment = () => deployments.get(p.id);
+  const server = () => deployment() && servers.get(deployment()?.serverID!);
 	
 	return (
-    <Show when={deployment()}>
+    <Show when={deployment() && server()}>
       <Grid class={s.Deployment}>
         {/* left / actions */}
         <Grid class={s.Left}>
           <Flex class={s.Header}>
-            name:{" "}
-            <div style={{ "font-weight": "bold" }}>{deployment()!.name}</div>
+            <Grid gap="0.1rem">
+              <div class={s.ItemHeader}>{deployment()!.name}</div>
+              <div>{server()!.name}</div>
+            </Grid>
           </Flex>
           <Actions deployment={deployment()!} />
+          <Updates deploymentID={p.id} />
         </Grid>
-
         {/* right / tabs */}
         <DeploymentTabs />
       </Grid>
diff --git a/frontend/src/components/deployment/tabs/Config.tsx b/frontend/src/components/deployment/tabs/Config.tsx
index ebb22a2c9..e2f52adaa 100644
--- a/frontend/src/components/deployment/tabs/Config.tsx
+++ b/frontend/src/components/deployment/tabs/Config.tsx
@@ -4,7 +4,7 @@ import { useToggle } from "../../../util/hooks";
 
 const Config: Component<{}> = (p) => {
   const [editing, toggleEditing] = useToggle();
-  return <div class={s.Config}></div>;
+  return <div class={s.Config}>config</div>;
 };
 
 export default Config;
diff --git a/frontend/src/components/deployment/tabs/DeploymentTabs.tsx b/frontend/src/components/deployment/tabs/DeploymentTabs.tsx
index a484536cb..21671319a 100644
--- a/frontend/src/components/deployment/tabs/DeploymentTabs.tsx
+++ b/frontend/src/components/deployment/tabs/DeploymentTabs.tsx
@@ -1,13 +1,29 @@
 import { Component } from "solid-js";
-import Grid from "../../util/layout/Grid";
-import s from "../deployment.module.css";
+import Tabs from "../../util/tabs/Tabs";
+import Config from "./Config";
+import ErrorLog from "./ErrorLog";
+import Log from "./Log";
 
 const DeploymentTabs: Component<{}> = (p) => {
-	return (
-		<Grid class={s.DeploymentTabs} >
-			tabs
-		</Grid>
-	);
-}
+  return (
+    <Tabs
+      tabs={[
+        {
+          title: "log",
+          element: <Log />,
+        },
+        {
+          title: "error log",
+          element: <ErrorLog />,
+        },
+        {
+          title: "config",
+          element: <Config />,
+        },
+      ]}
+      localStorageKey="deployment-tab"
+    />
+  );
+};
 
-export default DeploymentTabs;
\ No newline at end of file
+export default DeploymentTabs;
diff --git a/frontend/src/components/deployment/tabs/ErrorLog.tsx b/frontend/src/components/deployment/tabs/ErrorLog.tsx
index 88891cc5c..d37667967 100644
--- a/frontend/src/components/deployment/tabs/ErrorLog.tsx
+++ b/frontend/src/components/deployment/tabs/ErrorLog.tsx
@@ -4,7 +4,7 @@ import s from "../deployment.module.css";
 const ErrorLog: Component<{}> = (p) => {
 	return (
 		<div class={s.ErrorLog} >
-			
+			error log
 		</div>
 	);
 }
diff --git a/frontend/src/components/deployment/tabs/Log.tsx b/frontend/src/components/deployment/tabs/Log.tsx
index d5d1d9083..a4cc1a625 100644
--- a/frontend/src/components/deployment/tabs/Log.tsx
+++ b/frontend/src/components/deployment/tabs/Log.tsx
@@ -4,7 +4,7 @@ import s from "../deployment.module.css";
 const Log: Component<{}> = (p) => {
 	return (
 		<div class={s.Log} >
-			
+			log
 		</div>
 	);
 }
diff --git a/frontend/src/components/deployment/updates/Update.tsx b/frontend/src/components/deployment/updates/Update.tsx
index 0d0d6531d..8ccc3112f 100644
--- a/frontend/src/components/deployment/updates/Update.tsx
+++ b/frontend/src/components/deployment/updates/Update.tsx
@@ -1,12 +1,13 @@
-import { Update } from "@monitor/types";
+import { Update as UpdateType } from "@monitor/types";
 import { Component } from "solid-js";
+import Grid from "../../util/layout/Grid";
 import s from "../deployment.module.css";
 
-const Update: Component<{ update: Update }> = (p) => {
+const Update: Component<{ update: UpdateType }> = (p) => {
 	return (
-		<div class={s.Update}>
+		<Grid class={s.Update}>
 			
-		</div>
+		</Grid>
 	);
 }
 
diff --git a/frontend/src/components/deployment/updates/Updates.tsx b/frontend/src/components/deployment/updates/Updates.tsx
index 8b5a12b7c..d8a75cc31 100644
--- a/frontend/src/components/deployment/updates/Updates.tsx
+++ b/frontend/src/components/deployment/updates/Updates.tsx
@@ -1,17 +1,24 @@
-import { Component } from "solid-js";
+import { Component, For, Show } from "solid-js";
 import { useUpdates } from "../../../state/hooks";
 import { useAppState } from "../../../state/StateProvider";
+import Grid from "../../util/layout/Grid";
 import s from "../deployment.module.css";
+import Update from "./Update";
 
 const Updates: Component<{ deploymentID: string }> = (p) => {
-	const { updates, ws } = useAppState();
-	const selectedUpdates = useUpdates({ deploymentID: p.deploymentID });
-	
-	return (
-		<div class={s.Updates} >
-			
-		</div>
-	);
-}
+  const { updates, ws } = useAppState();
+  const selectedUpdates = useUpdates({ deploymentID: p.deploymentID });
 
-export default Updates;
\ No newline at end of file
+  return (
+    <Grid class={s.Updates}>
+      <div class={s.ItemHeader}>updates</div>
+      <Show when={selectedUpdates.loaded()}>
+        <For each={selectedUpdates.collection()}>
+          {(update) => <Update update={update} />}
+        </For>
+      </Show>
+    </Grid>
+  );
+};
+
+export default Updates;
diff --git a/frontend/src/components/topbar/Account.tsx b/frontend/src/components/topbar/Account.tsx
index 4c01b0e5a..b4088c8da 100644
--- a/frontend/src/components/topbar/Account.tsx
+++ b/frontend/src/components/topbar/Account.tsx
@@ -10,7 +10,7 @@ const Account: Component<{}> = (p) => {
   const { logout } = useAppState();
   const { user, username } = useUser();
   return (
-    <Grid class={s.Account}>
+    <Grid class={s.Account} placeItems="center end">
       <div>{username()}</div>
       <div>permissions: {readablePermissions(user()!.permissions!)}</div>
       <ConfirmButton onConfirm={logout} color="red">
diff --git a/frontend/src/components/topbar/updates/Updates.tsx b/frontend/src/components/topbar/updates/Updates.tsx
index 183722df2..21e529bf3 100644
--- a/frontend/src/components/topbar/updates/Updates.tsx
+++ b/frontend/src/components/topbar/updates/Updates.tsx
@@ -9,6 +9,7 @@ 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>