diagram tabs

grucloud · Dec 7, 2023 · 52e7fa8 · 52e7fa8
1 parent e8ab060
commit 52e7fa8
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 88 deletions.
diff --git a/bau-ui/keyValueList/keyValueList.js b/bau-ui/keyValueList/keyValueList.js
@@ -8,6 +8,7 @@ export default function (context, options = {}) {
   const className = css`
     list-style: none;
     & li {
+      margin: 0.5rem 0;
       display: flex;
       flex-direction: column;
       font-size: smaller;

diff --git a/examples/gccd/src/components/run/diagramTab.ts b/examples/gccd/src/components/run/diagramTab.ts
@@ -0,0 +1,23 @@
+import rubicox from "rubico/x";
+const { isIn } = rubicox;
+import { type Context } from "@grucloud/bau-ui/context";
+
+const isCompleted = isIn(["completed", "error"]);
+
+export default function (context: Context) {
+  const { bau } = context;
+  const { section, img } = bau.tags;
+
+  return function Diagram(props: any) {
+    const { data }: any = props;
+    return section(
+      () =>
+        isCompleted(data.val.status) &&
+        !data.val.error &&
+        img({
+          src: data.val.svgUrl,
+          alt: "Resources",
+        })
+    );
+  };
+}
diff --git a/examples/gccd/src/components/run/runDetailContent.ts b/examples/gccd/src/components/run/runDetailContent.ts
@@ -1,116 +1,104 @@
 import rubicox from "rubico/x";
 const { isIn } = rubicox;
 import { type Context } from "@grucloud/bau-ui/context";
-import tableContainer from "@grucloud/bau-ui/tableContainer";
+import keyValueList from "@grucloud/bau-ui/keyValueList";
 
 import tableSkeleton from "../tableSkeleton";
 import runStatus from "./runStatus";
 
 export default function (context: Context) {
   const { bau, css, config } = context;
-  const { table, tr, td, th, section, a, img, tbody } = bau.tags;
+  const { div, section, a, li, label, span } = bau.tags;
+  const KeyValueList = keyValueList(context);
 
   const TableSkeleton = tableSkeleton(context);
   const RunStatus = runStatus(context);
-  const TableContainer = tableContainer(context, {
-    class: css`
-      & th {
-        text-align: left;
-      }
-    `,
-  });
 
   const isCompleted = isIn(["completed", "error"]);
 
   return function RunDetailContent({ data, loading }: any) {
-    return section(
-      TableContainer(
-        table(() => {
-          const {
-            org_id,
-            workspace_id,
-            project_id,
-            run_id,
-            status,
-            stateUrl,
-            logsUrl,
-            svgUrl,
-            error,
-          } = data.val;
-          return loading.val
-            ? TableSkeleton({ columnsSize: 2, rowSize: 8 })
-            : tbody(
-                tr(
-                  th("Organisation"),
-                  td(
-                    a({ href: `${config.base}/org/${org_id}` }, data.val.org_id)
+    return section(() => {
+      const {
+        org_id,
+        workspace_id,
+        project_id,
+        run_id,
+        status,
+        stateUrl,
+        logsUrl,
+        svgUrl,
+        error,
+      } = data.val;
+      return loading.val
+        ? TableSkeleton({ columnsSize: 2, rowSize: 8 })
+        : div(
+            {
+              class: css`
+                display: inline-flex;
+                gap: 3rem;
+              `,
+            },
+            KeyValueList(
+              li(
+                label("Organisation"),
+                span(
+                  a({ href: `${config.base}/org/${org_id}` }, data.val.org_id)
+                )
+              ),
+              li(
+                label("Project"),
+                span(
+                  a(
+                    {
+                      href: `${config.base}/org/${org_id}/projects/${project_id}`,
+                    },
+                    project_id
                   )
-                ),
-                tr(
-                  th("Project"),
-                  td(
-                    a(
-                      {
-                        href: `${config.base}/org/${org_id}/projects/${project_id}`,
-                      },
-                      project_id
-                    )
+                )
+              ),
+              li(
+                label("Workspace"),
+                span(
+                  a(
+                    {
+                      href: `${config.base}/org/${org_id}/projects/${project_id}/workspaces/${workspace_id}`,
+                    },
+                    workspace_id
                   )
-                ),
-                tr(
-                  th("Workspace"),
-                  td(
+                )
+              ),
+              li(label("RunId"), span(run_id)),
+              li(label("Status"), span(RunStatus({ status, error })))
+            ),
+            isCompleted(status) &&
+              KeyValueList(
+                li(
+                  label("State file"),
+                  span(
                     a(
-                      {
-                        href: `${config.base}/org/${org_id}/projects/${project_id}/workspaces/${workspace_id}`,
-                      },
-                      workspace_id
+                      { href: stateUrl, target: "_blank" },
+                      "Download state file"
                     )
                   )
                 ),
-                tr(th("Run Id"), td(run_id)),
-                tr(th("Status"), td(RunStatus({ status, error }))),
-                isCompleted(status) && [
-                  tr(
-                    th("State file"),
-                    td(
+                !error &&
+                  li(
+                    label("Live Graph"),
+                    span(
                       a(
-                        { href: stateUrl, target: "_blank" },
-                        "Download state file"
+                        { href: svgUrl, target: "_blank" },
+                        "Download resources graph"
                       )
                     )
                   ),
-                  !error &&
-                    tr(
-                      th("Live Graph"),
-                      td(
-                        a(
-                          { href: svgUrl, target: "_blank" },
-                          "Download resources graph"
-                        )
-                      )
-                    ),
-                  tr(
-                    th("Logs"),
-                    td(
-                      a(
-                        { href: logsUrl, target: "_blank" },
-                        "Download log file"
-                      )
-                    )
-                  ),
-                ]
-              );
-        }),
-
-        () =>
-          isCompleted(data.val.status) &&
-          !data.val.error &&
-          img({
-            src: data.val.svgUrl,
-            alt: "Resources",
-          })
-      )
-    );
+                li(
+                  label("Logs"),
+                  span(
+                    a({ href: logsUrl, target: "_blank" }, "Download log file")
+                  )
+                )
+              )
+          );
+    });
   };
 }
diff --git a/examples/gccd/src/components/run/runTabs.ts b/examples/gccd/src/components/run/runTabs.ts
@@ -2,10 +2,12 @@ import { type Context } from "@grucloud/bau-ui/context";
 import tabs, { Tabs } from "@grucloud/bau-ui/tabs";
 import runDetailContent from "./runDetailContent";
 import resourcesTree from "../resourcesTree";
+import diagramTab from "./diagramTab";
 
 export default function (context: Context) {
   const RunDetailContent = runDetailContent(context);
   const ResourcesTree = resourcesTree(context);
+  const DiagramTab = diagramTab(context);
 
   return function RunTabs(props: any) {
     const tabDefs: Tabs = [
@@ -19,6 +21,11 @@ export default function (context: Context) {
         Header: () => "Resources",
         Content: () => ResourcesTree(props),
       },
+      {
+        name: "diagram",
+        Header: () => "Diagram",
+        Content: () => DiagramTab(props),
+      },
     ];
 
     const Tabs = tabs(context, { tabDefs, variant: "plain", color: "neutral" });