feat: restructure instance detail page

Co-authored-by: Julian Geywitz <geywitz@sipgate.de>
sipgate · Dec 9, 2022 · 5221294 · 5221294
1 parent 49f5197
commit 5221294
Show file tree

Hide file tree

Showing 14 changed files with 245 additions and 281 deletions.
diff --git a/web/src/components/Card/Card.module.scss b/web/src/components/Card/Card.module.scss
@@ -1,30 +1,12 @@
 .root {
-  display: grid;
-  grid-template-columns: 24px 1fr min-content;
-  grid-template-areas: "icon title badge";
-  gap: 1rem;
   padding: 1rem;
   border: 1px solid var(--color-separator);
-  border-radius: 4px;
+  border-radius: 0.5rem;
 
-  &.hasBody {
-    grid-template-areas: "icon title badge" ". body body";
-  }
-
-  &:not(:last-of-type) {
+  > header {
+    display: flex;
+    gap: 1rem;
+    font-weight: bold;
     margin-bottom: 1rem;
   }
-
-  .icon {
-    opacity: 0.65;
-  }
-
-  .icon,
-  .title {
-    align-self: center;
-  }
-
-  .body {
-    grid-area: body;
-  }
 }
diff --git a/web/src/components/Card/Card.tsx b/web/src/components/Card/Card.tsx
@@ -1,31 +1,25 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import classNames from "classnames";
 import React, { PropsWithChildren, ReactElement } from "react";
 import Icon from "../Icon/Icon";
 import styles from "./Card.module.scss";
 
 type Props = {
   icon: IconDefinition;
   title: string;
-  badge?: ReactElement;
 };
 
 function Card({
   icon,
-  badge,
   title,
   children,
 }: PropsWithChildren<Props>): ReactElement {
   return (
-    <div
-      className={classNames(styles.root, {
-        [styles.hasBody]: !!children,
-      })}
-    >
-      <Icon className={styles.icon} icon={icon} />
-      <span className={styles.title}>{title}</span>
-      {badge}
-      {children && <div className={styles.body}>{children}</div>}
+    <div className={styles.root}>
+      <header>
+        <Icon className={styles.icon} icon={icon} />
+        <span className={styles.title}>{title}</span>
+      </header>
+      <section>{children}</section>
     </div>
   );
 }

diff --git a/web/src/components/CardGrid/CardGrid.module.scss b/web/src/components/CardGrid/CardGrid.module.scss
diff --git a/web/src/components/CardGrid/CardGrid.tsx b/web/src/components/CardGrid/CardGrid.tsx
diff --git a/web/src/components/InstanceBanner/InstanceBanner.module.scss b/web/src/components/InstanceBanner/InstanceBanner.module.scss
@@ -0,0 +1,47 @@
+.root {
+  .divider {
+    background: var(--color-separator);
+    width: 1px;
+  }
+
+  .specifications {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 1rem 2rem;
+    background: var(--overlay);
+    padding: 1rem;
+    border-radius: 0.5rem 0.5rem 0 0;
+  }
+
+  > footer {
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+    border: 1px solid var(--color-separator);
+    border-top: 0;
+    border-radius: 0 0 0.5rem 0.5rem;
+  }
+
+  .nodes {
+    > h3 {
+      font-size: 1rem;
+      margin: 0 0 1rem;
+    }
+
+    .node {
+      display: flex;
+      justify-content: space-between;
+      padding: 0.5rem 0;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid var(--color-separator);
+      }
+    }
+  }
+
+  .tags,
+  .osName {
+    display: flex;
+    gap: 0.5rem;
+  }
+}
diff --git a/web/src/components/InstanceBanner/InstanceBanner.tsx b/web/src/components/InstanceBanner/InstanceBanner.tsx
@@ -0,0 +1,79 @@
+import {
+  faComputer,
+  faHdd,
+  faMemory,
+  faMicrochip,
+  faTags,
+} from "@fortawesome/free-solid-svg-icons";
+import React from "react";
+import { GntInstance } from "../../api/models";
+import { prettyPrintMiB } from "../../helpers";
+import Icon from "../Icon/Icon";
+import PrefixLink from "../PrefixLink";
+import QuickInfoBanner from "../QuickInfoBanner/QuickInfoBanner";
+import StatusBadge, { BadgeStatus } from "../StatusBadge/StatusBadge";
+import styles from "./InstanceBanner.module.scss";
+
+type Props = {
+  instance: GntInstance;
+};
+
+function InstanceBanner({ instance }: Props) {
+  const totalStorage = instance.disks
+    .map(({ capacity }) => capacity)
+    .reduce((prev, cur) => prev + cur);
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.specifications}>
+        <QuickInfoBanner>
+          <QuickInfoBanner.Item
+            icon={faMicrochip}
+            label="vCPUs"
+            value={instance.cpuCount.toString()}
+          />
+          <QuickInfoBanner.Item
+            icon={faMemory}
+            label="Memory"
+            value={prettyPrintMiB(instance.memoryTotal)}
+          />
+          <QuickInfoBanner.Item
+            icon={faHdd}
+            label="Storage"
+            value={prettyPrintMiB(totalStorage)}
+          />
+        </QuickInfoBanner>
+        <div className={styles.divider}></div>
+        <div className={styles.nodes}>
+          <h3>Nodes</h3>
+          <div className={styles.node} key={instance.primaryNode}>
+            <PrefixLink to={`/nodes/${instance.primaryNode}`}>
+              {instance.primaryNode}
+            </PrefixLink>
+
+            <StatusBadge status={BadgeStatus.PRIMARY}>Primary</StatusBadge>
+          </div>
+          {instance.secondaryNodes.map((node) => (
+            <div className={styles.node} key={node}>
+              <PrefixLink to={`/nodes/${node}`}>{node}</PrefixLink>
+            </div>
+          ))}
+        </div>
+      </div>
+      <footer>
+        <div className={styles.osName} title="Operating System">
+          <Icon icon={faComputer}></Icon>
+          {instance.OS}
+        </div>
+        <div className={styles.tags}>
+          <Icon icon={faTags}></Icon>
+          {instance.tags.map((tag) => (
+            <StatusBadge key={tag}>{tag}</StatusBadge>
+          ))}
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default InstanceBanner;
diff --git a/web/src/components/JobStartedAt.tsx b/web/src/components/JobStartedAt.tsx
@@ -12,7 +12,9 @@ function JobStartedAt({ timestamp }: Props): ReactElement {
 
   const date = unixToDate(timestamp);
 
-  return <span title={date.toLocaleString()}>{date.toLocaleTimeString()}</span>;
+  return (
+    <span title={date.toLocaleString()}>[{date.toLocaleTimeString()}]</span>
+  );
 }
 
 export default JobStartedAt;
diff --git a/web/src/components/QuickInfoBanner/QuickInfoBanner.module.scss b/web/src/components/QuickInfoBanner/QuickInfoBanner.module.scss
@@ -1,13 +1,14 @@
 .root {
   display: flex;
-  justify-content: space-around;
-  background: var(--overlay);
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
 
   > div {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
-    padding: 2rem;
+    padding: 0 1rem;
 
     .value {
       display: block;

diff --git a/web/src/views/Dashboard/Dashboard.module.scss b/web/src/views/Dashboard/Dashboard.module.scss
@@ -11,3 +11,8 @@
     font-weight: bold;
   }
 }
+
+.clusterSpecifications {
+  padding: 2rem;
+  background: var(--overlay);
+}
diff --git a/web/src/views/Dashboard/Dashboard.tsx b/web/src/views/Dashboard/Dashboard.tsx
@@ -38,28 +38,30 @@ function Dashboard(): ReactElement {
         {...apiProps}
         render={({ master, nodes, instances }) => (
           <>
-            <QuickInfoBanner>
-              <QuickInfoBanner.Item
-                icon={faServer}
-                label="Nodes"
-                value={String(nodes.count)}
-              />
-              <QuickInfoBanner.Item
-                icon={faServer}
-                label="Instances"
-                value={String(instances.count)}
-              />
-              <QuickInfoBanner.Item
-                icon={faMicrochip}
-                label="Node CPU Cores"
-                value={String(nodes.cpuCount)}
-              />
-              <QuickInfoBanner.Item
-                icon={faMemory}
-                label="Memory"
-                value={prettyPrintMiB(nodes.memoryTotal)}
-              />
-            </QuickInfoBanner>
+            <div className={styles.clusterSpecifications}>
+              <QuickInfoBanner>
+                <QuickInfoBanner.Item
+                  icon={faServer}
+                  label="Nodes"
+                  value={String(nodes.count)}
+                />
+                <QuickInfoBanner.Item
+                  icon={faServer}
+                  label="Instances"
+                  value={String(instances.count)}
+                />
+                <QuickInfoBanner.Item
+                  icon={faMicrochip}
+                  label="Node CPU Cores"
+                  value={String(nodes.cpuCount)}
+                />
+                <QuickInfoBanner.Item
+                  icon={faMemory}
+                  label="Memory"
+                  value={prettyPrintMiB(nodes.memoryTotal)}
+                />
+              </QuickInfoBanner>
+            </div>
             <div className={styles.currentMaster}>
               <StatusBadge>Master</StatusBadge>
               <PrefixLink to={`/nodes/${master}`}>

diff --git a/web/src/views/InstanceDetail/InstanceDetail.module.scss b/web/src/views/InstanceDetail/InstanceDetail.module.scss
@@ -4,37 +4,27 @@
   align-items: center;
 }
 
-.diskCapacity {
-  font-size: 1.25em;
-  margin: 0;
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
 }
 
-.nicVlan {
-  margin: 0.5rem 0;
-}
-
-.nicMac {
-  color: var(--color-emphasis-low);
-  margin: 0;
-}
+.nic,
+.disk {
+  padding: 0.5rem 0;
 
-.nicBridge {
-  margin: 0 0 0.25rem;
-  font-size: 1.25em;
-}
-
-.nicParamList {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  > p {
+    margin: 0.125rem 0;
+  }
 
-  li {
-    display: flex;
-    justify-content: space-between;
-    padding: 0.5rem 0;
+  > p:last-of-type {
+    font-family: monospace;
+    font-size: 1rem;
   }
 
-  li:not(:last-child) {
+  &:not(:last-child) {
     border-bottom: 1px solid var(--color-separator);
   }
 }