add links in updates and headers

frontend/src/components/build/Header.tsx

@@ -9,12 +9,13 @@ import { combineClasses, getId, version_to_string } from "../../util/helpers";
 import { useAppDimensions } from "../../state/DimensionProvider";
 import Updates from "./Updates";
 import { useLocalStorageToggle } from "../../util/hooks";
-import { useParams } from "@solidjs/router";
+import { A, useParams } from "@solidjs/router";
 import { PermissionLevel } from "../../types";
 import { client } from "../..";
+import HoverMenu from "../shared/menu/HoverMenu";
 
 const Header: Component<{}> = (p) => {
-  const { builds } = useAppState();
+  const { builds, servers } = useAppState();
   const params = useParams();
   const build = () => builds.get(params.id)!;
   const { user } = useUser();
@@ -24,36 +25,56 @@ const Header: Component<{}> = (p) => {
   const userCanUpdate = () =>
     user().admin ||
     build().permissions![getId(user())] === PermissionLevel.Update;
+  const server = () => servers.get(build().server_id);
   return (
     <>
-      <Flex
+      <Grid
+        gap="0.5rem"
         class={combineClasses("card shadow")}
-        justifyContent="space-between"
-        alignItems="center"
         style={{
           position: "relative",
           cursor: isSemiMobile() ? "pointer" : undefined,
+          height: "fit-content",
         }}
         onClick={() => {
           if (isSemiMobile()) toggleShowUpdates();
         }}
       >
-        <Grid gap="0.1rem">
+        <Flex alignItems="center" justifyContent="space-between">
           <h1>{build().name}</h1>
-          <div style={{ opacity: 0.8 }}>
-            build - v{version_to_string(build().version)}
+          <Show when={userCanUpdate()}>
+            <HoverMenu
+              target={
+                <ConfirmButton
+                  onConfirm={() => {
+                    client.delete_build(params.id);
+                  }}
+                  class="red"
+                >
+                  <Icon type="trash" />
+                </ConfirmButton>
+              }
+              content="delete build"
+              position="bottom center"
+              padding="0.5rem"
+            />
+          </Show>
+        </Flex>
+        <Flex alignItems="center" justifyContent="space-between">
+          <Flex alignItems="center">
+            <A
+              href={`/server/${build().server_id}`}
+              class="text-hover"
+              style={{ opacity: 0.7, padding: 0 }}
+            >
+              {server()?.server.name}
+            </A>
+            <div style={{ opacity: 0.7 }}>build</div>
+          </Flex>
+          <div style={{ opacity: 0.7 }}>
+            v{version_to_string(build().version)}
           </div>
-        </Grid>
-        <Show when={userCanUpdate()}>
-          <ConfirmButton
-            onConfirm={() => {
-              client.delete_build(params.id);
-            }}
-            class="red"
-          >
-            <Icon type="trash" />
-          </ConfirmButton>
-        </Show>
+        </Flex>
         <Show when={isSemiMobile()}>
           <Flex gap="0.5rem" alignItems="center" class="show-updates-indicator">
             updates{" "}
@@ -63,7 +84,7 @@ const Header: Component<{}> = (p) => {
             />
           </Flex>
         </Show>
-      </Flex>
+      </Grid>
       <Show when={isSemiMobile() && showUpdates()}>
         <Updates />
       </Show>

frontend/src/components/deployment/Header.tsx

@@ -1,7 +1,11 @@
 import { Component, Show } from "solid-js";
 import { useAppState } from "../../state/StateProvider";
 import { useUser } from "../../state/UserProvider";
-import { combineClasses, deploymentHeaderStateClass, getId } from "../../util/helpers";
+import {
+  combineClasses,
+  deploymentHeaderStateClass,
+  getId,
+} from "../../util/helpers";
 import ConfirmButton from "../shared/ConfirmButton";
 import Icon from "../shared/Icon";
 import Flex from "../shared/layout/Flex";
@@ -11,11 +15,11 @@ import { useLocalStorageToggle } from "../../util/hooks";
 import { useAppDimensions } from "../../state/DimensionProvider";
 import Updates from "./Updates";
 import { DockerContainerState, PermissionLevel } from "../../types";
-import { useParams } from "@solidjs/router";
+import { A, useParams } from "@solidjs/router";
 import { client } from "../..";
 
 const Header: Component<{}> = (p) => {
-  const { deployments } = useAppState();
+  const { deployments, servers } = useAppState();
   const params = useParams();
   const deployment = () => deployments.get(params.id)!;
   const { user } = useUser();
@@ -31,6 +35,7 @@ const Header: Component<{}> = (p) => {
     user().admin ||
     deployment().deployment.permissions![getId(user())] ===
       PermissionLevel.Update;
+  const server = () => servers.get(deployment().deployment.server_id);
   return (
     <>
       <Grid
@@ -66,9 +71,18 @@ const Header: Component<{}> = (p) => {
           </Show>
         </Flex>
         <Flex alignItems="center" justifyContent="space-between">
-          <div class={deploymentHeaderStateClass(deployment().state)}>
-            {deployment().state}
-          </div>
+          <Flex alignItems="center">
+            <A
+              href={`/server/${deployment().deployment.server_id}`}
+              class="text-hover"
+              style={{ opacity: 0.7, padding: 0 }}
+            >
+              {server()?.server.name}
+            </A>
+            <div class={deploymentHeaderStateClass(deployment().state)}>
+              {deployment().state}
+            </div>
+          </Flex>
           <Show when={status()}>
             <div style={{ opacity: 0.7 }}>{status()}</div>
           </Show>

frontend/src/components/home/Updates/Update.tsx

@@ -1,3 +1,4 @@
+import { A } from "@solidjs/router";
 import { Component, Show } from "solid-js";
 import { useAppState } from "../../../state/StateProvider";
 import { Operation, Update as UpdateType, UpdateStatus } from "../../../types";
@@ -29,7 +30,14 @@ const Update: Component<{ update: UpdateType }> = (p) => {
     if (p.update.operation === Operation.BuildBuild) {
       return `build ${readableVersion(p.update.version!)}`;
     }
-    return `${p.update.operation.replaceAll("_", " ")}${p.update.version ? " " + readableVersion(p.update.version) : ""}`;
+    return `${p.update.operation.replaceAll("_", " ")}${
+      p.update.version ? " " + readableVersion(p.update.version) : ""
+    }`;
+  };
+  const link_to = () => {
+    return p.update.target.type === "System"
+      ? "/"
+      : `/${p.update.target.type.toLowerCase()}/${p.update.target.id}`;
   };
   return (
     <Flex
@@ -38,7 +46,9 @@ const Update: Component<{ update: UpdateType }> = (p) => {
       alignItems="center"
     >
       <Grid gap="0.5rem" placeItems="center start">
-        <h2>{name()}</h2>
+        <A style={{ padding: 0 }} href={link_to()}>
+          <h2 class="text-hover">{name()}</h2>
+        </A>
         <Flex gap="0.5rem">
           <div
             style={{

frontend/src/components/home/home.module.scss

@@ -25,7 +25,6 @@
 	cursor: pointer;
 	width: 100%;
 	display: grid;
-	gap: 1rem;
 }
 
 .ServerButton {

frontend/src/style/colors.scss

@@ -4,7 +4,7 @@ $lightgrey: #3f454d;
 $grey: #25292e;
 $darkgrey: #16181b;
 
-$textblue: #1265e1;
+$textblue: #5f9af4;
 $lightblue: #1c63cd;
 $blue: #184e9f;
 $darkblue: #12366d;

frontend/src/style/index.scss

@@ -255,6 +255,14 @@ svg {
   color: c.$textorange;
 }
 
+.text-hover {
+  transition: all 250ms ease-in-out;
+}
+
+.text-hover:hover {
+  color: c.$textblue;
+}
+
 .shadow {
   box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 8px;
   transition: all 250ms ease-in-out;